如何调用bing地图(三) Bing Map V8

18 Oct 2017

微软的Bing map 最近一个月升级到了V8版本，其中一些接口与V7相比发生了一些变化，所以升级地图的时候要注意了。

先说一下参考文档：

1.Bing Maps V7 to V8 Migration Guide

如果你发现那个接口不能用了，从这个文档里里面查找一下原因

2.Setting Map Control Parameters

V8地图导入接口提供了更丰富的参数，值得注意的有：

a.callback=GetMap, 这里面callback会在地图插件加载好以后执行，所以要注意你的GetMap和其他js的前后依赖顺序。

b.setLang和setMkt，V8可以根据你的环境来auto set lang，但是如果你需要国际化来设置语言的话，就需要用这两个来设置，详细的语言参数link里面有。

c.branch=experimental, Bing map V8这一个月的使用感觉来说还是不太平稳，branch分为release和experimental两个版本，default是release的，但是还是要有过段时间出问题的准备，不过再过段时间又会好了。

d.async defer的设置其实很重要，这个要和callback还有你的其他js来配合使用。什么时候用只用defer，什么时候async defer都不要用，这个考验你对js异步加载的理解。

3.Dev Center map demo

这个link极其重要，里面是demos

下面是我开发中遇到的从V7到V8迁移所需要注意的点：

a.pushpin导入的方式不一样了，要用到icon，而不是htmlContent

              code：
              V7
              pushpin = new Microsoft.Maps.Pushpin(location, {
                  htmlContent: ''<div class="bingLocation">'<span class="bingIndex">'+(i + currentFromIndex).toString()+''</span>'<div class="send-to__svg">'<svg>'<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape-mapPin-red">'</use>'</svg>'</div>'</div>'
              });

              V8
              pushpin = new Microsoft.Maps.Pushpin(location, {
                  icon: ''<svg xmlns="http://www.w3.org/2000/svg" width="26" height="36">'<title>location'</title>'<path fill="#2776e3" d="M10 0c-5.531 0-10 4.469-10 10s5 13 10 22c5-9 10-16.469 10-22s-4.469-10-10-10zM10 14c-2.219 0-4-1.781-4-4s1.781-4 4-4 4 1.781 4 4-1.781 4-4 4z">'</path>'</svg>'
              });

b.初始化声明地图的方式，可以直接把selector当作第一个参数

              code：
              V7
              var BingMap = new Microsoft.Maps.Map($('.signed-test-finder .testMap')[0],bingMapOptions);
              
              V8
              var BingMap = new Microsoft.Maps.Map( '.signed-test-finder .testMap', bingMapOptions);

c.Directions set point的时候第一个参数必须有address属性不能ignore

              code:
              V7
              var pointB = new Microsoft.Maps.Directions.Waypoint({ location: locationB, pushpin: pushpinB });

              V8
              var pointB = new Microsoft.Maps.Directions.Waypoint({ address: $('.test').find('.storeName').text().trim() ,location: locationB, pushpin: pushpinB });

未完待续