Azure Maps 中的标记数组和弹出窗口

Question

我正在尝试在 Azure 中重写我最初在 Bing V8 中编写的地图，因为 Bing 将于 6 月退役。

Marker[i] = new atlas.HtmlMarker({ 可拖动：真实，文本：[我]， html内容：''，
像素偏移: [0, 0], 位置：地图点，弹出窗口：新 atlas.Popup({ 内容：“位置”，像素偏移: [0, -30] })

    });
       map.markers.add(Marker[i]);

map.events.add('mouseover', Marker, function () {popup.open(map)});

二十个标记已添加到地图中，但弹出窗口不起作用，并且地图事件会引发错误。正确的语法是什么？与 Leaflet 等相比，Azure 似乎确实很复杂。

Answer 1

在 Azure Maps 中，添加标记和处理弹出窗口的方法与 Bing Maps 略有不同，并且还需要仔细管理事件侦听器。

请参阅此 link 了解有关向地图上的某个点添加弹出窗口的说明，并参阅此 link 了解如何向地图添加 HTML 标记。

下面的代码用于将添加标记和弹出窗口的逻辑与天蓝色地图中的事件处理相结合

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Markers Array and Popups in Azure Maps</title>

    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to create an array of markers with popups in Azure Maps." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, markers, popups, events" />
    <meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
    <meta name="screenshot" content="screenshot.jpg" />

    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, markersArray = [];

        function getMap() {
            map = new atlas.Map('myMap', {
                view: 'Auto',
                authOptions: {
                    authType: 'anonymous',
                    clientId: 'e6', 
                    getToken: function (resolve, reject, map) {
                        var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
                        fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
                    }
                }
            });

            map.events.add('ready', function () {
               
                const positions = [
                    [-122.335167, 47.608013],
                    [-118.2437, 34.0522],    
                    [-73.935242, 40.730610],
                ];
                for (var i = 0; i < positions.length; i++) {
              
                    var mapPoint = positions[i];
                    var popup = new atlas.Popup({
                        content: "<div>Position " + (i + 1) + "</div>", 
                        pixelOffset: [0, -30] 
                    });

                    var marker = new atlas.HtmlMarker({
                        draggable: true,
                        text: [i + 1], 
                        htmlContent: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="37" viewBox="0 0 30 37"><rect x="0" y="0" rx="8" ry="8" width="30" height="30" fill="purple"/><polygon fill="purple" points="10,29 20,29 15,37 10,29"/><text x="15" y="20" style="font-size:16px;font-family:arial;fill:#ffffff;" text-anchor="middle">{text}</text></svg>',
                        pixelOffset: [0, 0],
                        position: mapPoint,
                        popup: popup
                    });
                    map.markers.add(marker);
                    markersArray.push(marker);
                    marker.events.add('mouseover', function (e) {
                        var popup = e.target.popup;
                        popup.open(map);
                    });
                    marker.events.add('mouseout', function (e) {
                        var popup = e.target.popup;
                        popup.close();
                    });
                }
            });
        }
    </script>
</head>
<body onload='getMap()'>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend>Markers Array and Popups</legend>
        This sample demonstrates how to create an array of markers with popups that open on mouseover in Azure Maps.
    </fieldset>
</body>
</html>

输出：

html-markers

popup-events

Azure Maps 中的标记数组和弹出窗口

问题描述投票：0回答：1

1个回答

最新问题

Azure Maps 中的标记数组和弹出窗口

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1