bing Map 在多语言的vue项目中的使用

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 devTools
export 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里的，这时需要在上面的方法里获取到语种，如下：（保存、删除、获取我都写出来了）

// 保存数据到sessionStorage
sessionStorage.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);
                });

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

<div id='myMap' style=' 100%; height: 300px;'></div>

这样就成功了！