顯示具有 Bing Maps API 標籤的文章。 顯示所有文章
顯示具有 Bing Maps API 標籤的文章。 顯示所有文章

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, PolylinePushpin  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

申請 Bing Maps API

最近比賽需要,所以就來申請Bing Maps API
Bing Maps APIGoogle Maps API的另一個選擇
首先到Bing Maps申請一組Key,申請之前必須先擁有Microsoft account

Bing Maps API有分三種版本,在這邊我是用Basic Key



  Trial Key Basic Key Enterprise Key
Public website
Windows Store app
Mobile
Broadcast
Not-for-profit  
Education  
Private website  
Business asset management  

申請完會看到Bing Maps Account Center