bing map初始尝试

最新推荐文章于 2024-08-15 00:45:43 发布

konta_konta

最新推荐文章于 2024-08-15 00:45:43 发布

阅读量1k

点赞数

分类专栏： map

本文链接：https://blog.csdn.net/konta_konta/article/details/18358225

版权

map 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在开始说bing map之前，先说明为什么会研究bing map，因为自己原来已经开发过google map，nokia map等online map（此外百度map也有研究过），还研究过mapx这种静态数据地图。介入bing map是由于google退出中国后，地图服务api经常不work（国外很流畅），尤其是地图路线服务，经常得到拒绝的应答，所以才花了多半天的时间研究了bingmap。

开发bing map首先要申请license。其他的跟googlemap很像。下边是我做了一个提供路线的例子，其中有waypoint，pushpin和anchor的使用，顺便提一句bing map是支持https的哦。在这一点上超越nokia google baidu。

想要支持https需要将引用的js库的地址改为https开头。做大型商业应用的可以考虑下。效果如下图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
           <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
      
      var  directionsManager ;
      var map;
      function GetMap(){   
                    
          map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
                           {credentials: "your license",
                            center: new Microsoft.Maps.Location(31, 121),
                            mapTypeId: Microsoft.Maps.MapTypeId.road,
                            zoom: 14});
                            
           Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDrivingRoute });                 
           Microsoft.Maps.Events.addHandler(map, 'click', displayEventInfo);
        
      }
      
       function createDirectionsManager(){         
        var displayMessage;         
         if (!directionsManager){           
            directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map); 
         }          
         directionsManager.resetDirections();       
         directionsErrorEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', function(arg) { alert(arg.message) });     
         directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', function() {  }); 
         }      
     
       function createDrivingRoute() {      
             if (!directionsManager) { 
                 createDirectionsManager(); 
                 }      
                 directionsManager.resetDirections();        // Set Route Mode to driving      
              directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });  
         
              
            var pushpin1= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(31.2, 122.441650), {anchor:new Microsoft.Maps.Point(10, 28), textOffset: new Microsoft.Maps.Point(-3, 2),width: 30, height: 50,icon:'mpr.gif',text:'1'});
            
              map.entities.push(pushpin1);
      
              var pushpin2= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(31.955134, 121.411650), {anchor:new Microsoft.Maps.Point(10, 28), textOffset: new Microsoft.Maps.Point(-3, 2), width: 30, height: 50,icon:'mpr.gif',text:'2'});
            
              map.entities.push(pushpin2);
              
              var pushpin3= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(32.255134, 121.441650), {anchor:new Microsoft.Maps.Point(10, 28),  textOffset: new Microsoft.Maps.Point(-3, 2),width: 30, height: 50,icon:'mpr.gif',text:'3'});
            
              map.entities.push(pushpin3);
          
              
          var aPoint = new Microsoft.Maps.Directions.Waypoint({pushpin:pushpin1,location: new Microsoft.Maps.Location(31.2, 122.441650)});   
              directionsManager.addWaypoint(aPoint);   
          var cPoint = new Microsoft.Maps.Directions.Waypoint({pushpin:pushpin2,location: new Microsoft.Maps.Location(31.955134, 121.411650) });   
              directionsManager.addWaypoint(cPoint);  
          var bPoint = new Microsoft.Maps.Directions.Waypoint({pushpin:pushpin3,location: new Microsoft.Maps.Location(32.255134, 121.441650) });   
              directionsManager.addWaypoint(bPoint);       
          
          
         
             // Set the element in which the itinerary will be rendered     
            directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });  
                   
                      directionsManager.calculateDirections();    
       }
                    
          function displayEventInfo(e) {
              if (e.targetType == "map") {//图上坐标与实际坐标转换。
                  var point = new Microsoft.Maps.Point(e.getX(), e.getY());
                  var loc = e.target.tryPixelToLocation(point);
                 alert( loc.latitude + ", " + loc.longitude);

              }
          }
          
      </script>
   </head>
   <body οnlοad="GetMap();">
      <div id='mapDiv' style="position:relative; width:800px; height:800px;"></div>       
   </body>
</html>