内嵌地图

vue + Bing(必应地图）

适用于中英文切换场景（百度地图不支持英文）
api 地址： link
api中文： link

申请秘钥

1 链接: link. （注册账号）
2 注册秘钥
申请秘钥的时候，如果是公司用， 最好用公司账号

vue中使用

根实例中引入api

api中没有可配置语言的地方，所以这里采取动态加载

  mounted() {
    //   地图切换语言
    let lang = sessionStorage.getItem("language") || "zh";
    const bingKey =
      "Al76Ji9ET8dOXEdhEw9sy4yBo2MFIWmbR7DjMj2anhbFfLT1vBYh_tkw5MrvOBlJ";
    const BingMapUrl =
      "http://www.bing.com/api/maps/mapcontrol?setLang=" +
      lang +
      "&key=" +
      bingKey;
    // 插入script脚本
    let scriptNode = document.createElement("script");
    scriptNode.setAttribute("type", "text/javascript");
    scriptNode.setAttribute("src", BingMapUrl);
    document.body.appendChild(scriptNode);
  }
};

map实例

1 html中地图容器

2 js 中绘制地图
这里的jing,wei变量是需要显示的位置经纬度，可以直接去地图中输入自己的地址，查看经纬度

var map = new Microsoft.Maps.Map(document.getElementById("citymap"));
      map.setOptions({
        maxZoom: 12,
        minZoom: 5
      });
      //   绘制地图
      map.setView({
        center: new Microsoft.Maps.Location(jing, wei),
        centerOffset: new Microsoft.Maps.Point(jing, wei)
      });

3 多个地区显示
eg: 这里需要切换多个地区
实现：
1 定义一个数组 addrList

cityList: [
        {
          cityName: xian,
          cityInfo: `xianchengqiang`,
          isShow: false,
          jing: "31.229298",
          wei: "121.536888"
        },
        {},{},{}

2 切换事件

onClick(index) {
      for (let item of this.cityList) {
        item.isShow = false;
      }
      this.cityList[index].isShow = true;
      //   获取当前位置经纬度
      let jing = this.cityList[index].jing;
      let wei = this.cityList[index].wei;

      var map = new Microsoft.Maps.Map(document.getElementById("citymap"));
      // 设置扩大，缩小值
      map.setOptions({
        maxZoom: 12,
        minZoom: 5
      });
      //   绘制地图
      map.setView({
        center: new Microsoft.Maps.Location(jing, wei),
        centerOffset: new Microsoft.Maps.Point(jing, wei)
      });
      //   设置点标记
      var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
        color: "red"
      });
      map.entities.push(pushpin);
    }

3 切换语言的时候，会遇到一个问题，Microsoft不存在
在mounted中处理

  mounted() {
    // 默认选择第一个
    let timeout = 0;
    let interval = setInterval(() => {
      // 超时10秒加载失败
      if (timeout >= 20) {
        clearInterval(interval);
      }
      // 加载成功
      if (typeof Microsoft !== "undefined") {
        // console.log(Microsoft,"Microsoft")
        this.onClick(0);
        clearInterval(interval);
      }
      timeout += 1;
    }, 100);
  },