javascript - html 标记在 azure map 中添加附加属性

Question

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

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

关于 HtmlMarker 的 Azure map 文档:https://learn.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);                    
});