Bing Maps API的多个自定义标记

我已经有了代码来添加多个标记与信息框与Bing Maps API，目前使用默认的引脚标记。我知道有关于添加自定义标记的文档，但我希望为每个点使用不同的自定义图像标记。使用Google Maps API进行管理，但需要使用Bing地图并坚持使用此地图。任何帮助表示感谢，谢谢！Bing Maps API的多个自定义标记

<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' }; 
 
\t pushpinInfos[2] = { 'lat': 41.82328, 'lng': 20.962231, 'title': 'Another <a href="http://www.google.com">Kipper</a> Market', 'description': 'Kipper Gostivar' }; 
 
\t pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="http://www.google.com">Kipper</a> Gostivar' }; 
 
\t 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>

来源

2016-09-14 Lala

你有没有试过下面的答案？请更新。接受答案，如果它的工作，否则评论你再次得到的问题。因为这会帮助其他面临同样问题的人。 – user6838959

您可以像指定图标的路径和图钉图标的其他属性下面

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

为你可以在你的位置变量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>

来源

2016-09-17 05:48:00 user6838959

完美，谢谢，这就是我一直在寻找的！此外，我认为将anchor参数添加到引脚应允许控制自定义标记图像的哪个部分锚定到lat/lng点，例如，对于底部标记图像中心： var pin = new Microsoft.Maps.Pushpin（locs [i]，{icon：pushpinInfos [i] .icon，width：'20px'，height：'20px'，anchor：new Microsoft .Maps.Point（10,20）}）; – Lala

Bing Maps API的多个自定义标记

回答

相关问题