2013/10/05

在Bing Maps API加入標記圖示

Bing Maps API也可以標記圖示，有興趣可以參考『Adding Entities to the Map』

程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <script type="text/javascript">
   function GetMap(){

    // Create the locations
    var Kaohsiung = new Microsoft.Maps.Location(22.649264, 120.326293);
    var Taichung = new Microsoft.Maps.Location(24.264493, 120.944152);
    var Taipei = new Microsoft.Maps.Location(25.029617, 121.543451);

    // Initialize the map
    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
    credentials: "Your key number",
    center: Kaohsiung,
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    zoom: 8});

    // Create the entity collection with the polygon and pushpins at each corner
    var polygonWithPins = new Microsoft.Maps.EntityCollection();
    polygonWithPins.push(new Microsoft.Maps.Pushpin(Kaohsiung));
    polygonWithPins.push(new Microsoft.Maps.Pushpin(Taichung));
    polygonWithPins.push(new Microsoft.Maps.Pushpin(Taipei));

    // Add the shape to the map
    map.entities.push(polygonWithPins)
  }
  </script>
 </head>
 <body onload="GetMap();">
  <div id='mapDiv'></div>
 </body>
</html>

首先建立一個map元件，再來建立一個EntityCollection物件『polygonWithPins』
EntityCollection是一個群，EntityCollection可以加入Infobox, Polygon, Polyline, Pushpin  TileLayer, or EntityCollection.
polygonWithPins內包含了三個Pushpin，圖釘物件建構方法又可帶入位置

透過map的EntityCollection將圖釘群們加入到地圖



參考資料：
http://msdn.microsoft.com/en-us/library/gg427604.aspx
http://msdn.microsoft.com/en-us/library/gg427615.aspx
http://msdn.microsoft.com/en-us/library/gg427616.aspx
By at
標籤: , ,