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的多個自定義標記

回答

相關問題