bing Map 初始化

通常地图引入是<script></script>，但vue项目中仅某一两个页面需要用到百度地图，所以不想在 index.html 中全局引用。

但是我直接在当前页面通过 DOM 操作方式插入script标签到当前document中，如下：

let scriptNode = document.createElement("script");scriptNode.setAttribute("type", "text/javascript");scriptNode.setAttribute("src", "http://www.bing.com/api/maps/mapcontrol?setLang=zh-CN&ak=您的密钥");document.body.appendChild(scriptNode);

结果会报“Mirosorft is not defined”的错误，这里的原因是由于异步加载，所以在调用"Mirosorft"的时候可能SDK并没有引用成功。

那么：我采用了单独创建initMap.js脚本

// bing map init devToolsexport default {    init: function (){        const lang ='ZH-ch'        const bingKey = '密匙';        const BingMapUrl = 'http://www.bing.com/api/maps/mapcontrol?setLang='+ lang +'&key=' + bingKey;        return new Promise((resolve, reject) => {          if(typeof Microsoft !== "undefined") {            resolve(Microsoft);            return true;          }              // 插入script脚本          let scriptNode = document.createElement("script");          scriptNode.setAttribute("type", "text/javascript");          scriptNode.setAttribute("src", BingMapUrl);          document.body.appendChild(scriptNode);              // 等待页面加载完毕回调          let timeout = 0;          let interval = setInterval(() => {            // 超时10秒加载失败            if(timeout >= 20) {              reject();              clearInterval(interval);            }            // 加载成功            if(typeof Microsoft !== "undefined") {              resolve(Microsoft);              clearInterval(interval);            }            timeout += 1;          }, 100);      });    }  }

但是我说了，我做的项目是多语言的，而我的语种是存在session里的，这时需要在上面的方法里获取到语种，如下：（保存、删除、获取我都写出来了）

// 保存数据到sessionStoragesessionStorage.setItem('key', 'value'); // 从sessionStorage获取数据var data = sessionStorage.getItem('key'); // 从sessionStorage删除保存的数据sessionStorage.removeItem('key'); // 从sessionStorage删除所有保存的数据sessionStorage.clear();

 

我需要在vue页面调用这个方法，于是我在mounted里面：

initBingMap.init()        .then((Microsoft) => {            console.log(Microsoft)            console.log("加载成功...");            this.loadMap();        })

 剩下的地图样式就在loadMap方法里面写了：

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {                /* No need to set credentials if already passed in URL */                center: new Microsoft.Maps.Location(47.624527, -122.355255),                zoom: 8 });                Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {                    var searchManager = new Microsoft.Maps.Search.SearchManager(map);                    var requestOptions = {                        bounds: map.getBounds(),                        where: 地址,                        callback: function (answer, userData) {                            map.setView({ bounds: answer.results[0].bestView });                            map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location));                        }                    };                    searchManager.geocode(requestOptions);                });

当然：最重要的一点是要在页面加入：

 

这样就成功了！