html 标记在 azure 地图中添加其他属性

Question

我正在将公司的所有站点加载为 Azure 地图中的 html 标记，然后单击它，启动一个显示站点特定信息的弹出窗口。

Html 标记没有任何属性包，通过它我可以传递一堆站点信息，我可以在我打算在单击 [= 时显示的弹出窗口中使用这些信息20=] 标记。

关于 Html 标记的 azure maps 文档：https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.htmlmarkeroptions?view=azure-maps-typescript-latest

有什么帮助吗？

Answer 1

简单地将自定义属性添加到 html 标记并将您的数据添加到其中。该数据将始终与标记一起。例如：

var popup = new atlas.Popup();

//Create a HTML marker and add it to the map.
var marker = new atlas.HtmlMarker({
    position: [0, 0]
});

//Add your custom property with data
marker.properties = { 
    title: 'hello world'
};

map.markers.add(marker);

 map.events.add('click', marker, function(e){   
    //Get the clicked marker.                
    var m = e.target;

    //Get custom properties on the marker
    var p = m.properties;

     popup.setOptions({
        content: `<div style="padding:10px;">${p.title}</div>`,
        position:m.getOptions().position,
        pixelOffset: [0, -18]
    });

    //Open the popup.
    popup.open(map);                    
});

html 标记在 azure 地图中添加其他属性

html marker add additional properties in azure maps

javascript

azure

azure-maps