Bing 地图 API 的多个自定义标记

Question

我已经获得了使用 Bing 地图 API 添加带有信息框的多个标记的代码，目前使用默认的图钉标记。我知道有关于添加自定义标记的文档，但我希望为每个点使用不同的自定义图像标记。设法使用 Google 地图 API 实现，但需要使用 Bing 地图并坚持使用这个地图。感谢任何帮助，谢谢！

<script>
var pinInfobox;
function GetMap() {
    var pushpinInfos = [];
    pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia' };
    pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar' };
 pushpinInfos[2] = { 'lat': 41.82328, 'lng': 20.962231, 'title': 'Another <a href="http://www.google.com">Kipper</a> Market', 'description': 'Kipper Gostivar' };
 pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="http://www.google.com">Kipper</a> Gostivar' };
 pushpinInfos[4] = { 'lat': 42.000900, 'lng': 21.466440, 'title': 'Market', 'description': 'Gostivar' };
    var infoboxLayer = new Microsoft.Maps.EntityCollection();
    var pinLayer = new Microsoft.Maps.EntityCollection();
    var apiKey = "<api_key>";
    var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey });
    // Create the info box for the pushpin
    pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
    infoboxLayer.push(pinInfobox);
    var locs = [];
    for (var i = 0 ; i < pushpinInfos.length; i++) {
        locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
        var pin = new Microsoft.Maps.Pushpin(locs[i]);
        pin.Title = pushpinInfos[i].title;
        pin.Description = pushpinInfos[i].description;
        pinLayer.push(pin); 
        Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    }
    map.entities.push(pinLayer);
    map.entities.push(infoboxLayer);
    var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
    map.setView({ center: bestview.center, zoom: 10 });
}
function displayInfobox(e) {
    pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
    pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e) {
    pinInfobox.setOptions({ visible: false });
}
    </script>

<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"></script>

<body onLoad="GetMap();">
    <div id="map" style="position: relative; width: 600px; height: 450px;"></div>
</body>

Answer 1

您可以指定图钉图标的图标路径和其他属性，如下所示

var pin = new Microsoft.Maps.Pushpin(locs[i], {icon: 'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg', width:'20px', height: '20px'});

查看参考文档以了解更多选项。

http://msdn.microsoft.com/en-us/library/gg427629.aspx

对于每个位置的随机图标，您可以在位置变量 var pushpinInfos = []; 中配置图标路径。请参阅下面的示例代码

我在下面的代码中使用的图标只是示例。您可以创建自己的图标并放置在您的服务器中并设置它的路径。

<script>
    var pinInfobox;
    function GetMap() {
        var pushpinInfos = [];
        pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia', 'icon' :'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg' };
        pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Azure-icon.png' };
        pushpinInfos[2] = { 'lat': 41.82328, 'lng': 20.962231, 'title': 'Another <a href="http://www.google.com">Kipper</a> Market', 'description': 'Kipper Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Chartreuse-icon.png' };
        pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="http://www.google.com">Kipper</a> Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Inside-Chartreuse-icon.png' };
        pushpinInfos[4] = { 'lat': 42.000900, 'lng': 21.466440, 'title': 'Market', 'description': 'Gostivar', 'icon' :'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg' };
        var infoboxLayer = new Microsoft.Maps.EntityCollection();
        var pinLayer = new Microsoft.Maps.EntityCollection();
        var apiKey = "<api_key>";
        var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey });
        // Create the info box for the pushpin
        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        infoboxLayer.push(pinInfobox);
        var locs = [];
        for (var i = 0 ; i < pushpinInfos.length; i++) {
            locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
            var pin = new Microsoft.Maps.Pushpin(locs[i], {icon: pushpinInfos[i].icon, width:'20px', height:'20px'});
            pin.Title = pushpinInfos[i].title;
            pin.Description = pushpinInfos[i].description;
            pinLayer.push(pin); 
            Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
        }
        map.entities.push(pinLayer);
        map.entities.push(infoboxLayer);
        var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
        map.setView({ center: bestview.center, zoom: 10 });
    }
    function displayInfobox(e) {
        pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
        pinInfobox.setLocation(e.target.getLocation());
    }
    function hideInfobox(e) {
        pinInfobox.setOptions({ visible: false });
    }
</script>

Bing 地图 API 的多个自定义标记

Multiple Custom Markers with Bing Maps API

javascript

bing-maps