本站已关停,现有内容仅作科研等非赢利用途使用。特此声明。
查看: 2434|回复: 0
打印 上一主题 下一主题

如何将Bing Maps应用无缝迁移到Google Maps平台上

[复制链接]
跳转到指定楼层
1#
发表于 2014-5-17 12:01:17 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 Alpha 于 2014-5-17 12:21 编辑

有图有真相,对比迁移前后的应用。


迁移过程包括四个步骤:

  • 加载Google Maps Javascript API V3

    • 加载Google Maps Javascript V3在HTML页(s)的head中。

  • 替换Bing与Google对象

    • 替换Bing地图对象与google.maps。*对象,并确保初始化属性匹配。删除任何剩余的Bing / Virtual Earth参考,以保持清洁的代码库。
    • 尝试使用 Get My Google Map 应用程序来自动替换兵与谷歌地图的对应对象。请注意,这个应用程序是仍在建设中。
    • 参考地图 Bing  V7 API文档Google Maps API v3 文档映射两种API之间的对象。

  • 重用

    • 利用现有的Web服务查询数据并绘制地图或升级到谷歌地图引擎对于一个强大的基于云的解决你的数据需求,

  • 加强

    • 提高应用程序与谷歌地图JavaScript API的附加 ​​功能,如街景,公交路线,交通和热图的能力。


下面是Bing地图2013代码示例移植到了Google Maps Javascript API v3。我们在黄色的唯一线和两个代码样本之间被改变的对象突出显示。正如你可以看到,开发商谁是熟悉的Bing Maps API应该没有问题的Google Maps JavaScript API的工作。

Bing Maps API v7 Code Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Add default pushpin</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 map = null;
           
      function getMap()
      {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key', center: new Microsoft.Maps.Location(47.609771, -122.2321543125), zoom: 8});
      }
     
      function addDefaultPushpin()
      {
        var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null);
        map.entities.push(pushpin);
      }
      </script>
   </head>
   <body>
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      <div>
         <input type="button" value="AddDefaultPushpin" />
      </div>
   </body>
</html>


Google Maps Javascript API v3 Code Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Add default pushpin</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&client=gme-yourclientid"></script>
      <script type="text/javascript">
      var map = null;
           
      function getMap()
      {
        map= new google.maps.Map(document.getElementById('myMap'), {center: new google.maps.LatLng(47.609771, -122.2321543125), zoom: 8});
        map.setMapTypeId(google.maps.MapTypeId.HYBRID);
      }
     
      function addDefaultPushpin()
      {
        var pushpin= new google.maps.Marker({position: map.getCenter(), map:map});
      }
      </script>
   </head>
   <body>
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      <div>
         <input type="button" value="AddDefaultPushpin" />
      </div>
   </body>
</html>




ChinaGDG.com
回复

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表