vue 依据腾讯地图数据实现动态的全国地图

今天帮助同事解决了一个问题，虽然我现在用不到，但是可以记录下来，说不定哪天就需要了，同时也可以帮助别人。

效果：

上面只是一张简单的图片，真实的效果和我们手机上安装的腾讯地图app一样，可以随时放大和缩小。

实现：

第一步：

不论我们在项目中遇到关于地图的什么形式，比如是腾讯地图和百度地图等，都需要去获取一个密钥，有了它，我们才可以去使用相关的数据。

获取腾讯地图的密钥
1、首先去申请一个key，可以在 腾讯官网 这个网站里申请。打开是下图这个样子的。
2、点击登录，绑定一些信息，手机号之类的，随后点进开发者信息里，如下图
3、点击key管理，创建新密钥，填写相应信息即可
4、申请成功后是这样的-（五位一组，共六组）

代码实现

1、在vue项目中src中新建utils文件夹，建一个js文件（map.js）

// 引入qq地图
export function TMap(key) {
  console.log(key)
  return new Promise(function (resolve, reject) {
    window.init = function () {
      resolve(qq) //注意这里
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://map.qq.com/api/js?v=2.exp&callback=init&key=" + key;
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

解释：

声明一个TMap函数并抛出，key值是在使用页面中传过去的参数（即密钥），接着便是使用parmise中resolve把返回的值传到页面上。

2、便是把这个js文件引入到我们要使用的页面中

import { TMap } from "../../utils/atlas";

3、在created里面调用

TMap(这里便是你申请的key（密钥）).then((qq) => {
      	this.init(); //init是初始化的方法
}),

4、在你要展示的页面给一个承载的容器

<div id="main_echarts" style="width: 500px; height: 400px"></div>

5、初始化地图方法（init）

data() {
  return {
     longitude: "",
     latitude: ""
  };
},
methods: {
    init() {
      let address = "";
      let that = this;
      var center = new qq.maps.LatLng(34.754152, 113.667636);// 注意这里前面是一个地区的纬度，一个是经度（即页面每次刷新停留的地方）
      var map = new qq.maps.Map(document.getElementById('main_echarts'), {
        center: center,
        zoom: 13,
        disableDefaultUI: true
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map
      });
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
      var geocoder = new qq.maps.Geocoder({
        complete: function(res) {
          console.log(res);
          address = res.detail.nearPois[0].name;
        }
      });
      qq.maps.event.addListener(map, "click", function(event) {
        this.longitude = event.latLng.getLat();
        this.latitude = event.latLng.getLng();
        console.log(event);
        let lat = new qq.maps.LatLng(this.longitude, this.latitude);
        geocoder.getAddress(lat);
        setTimeout(() => {
          infoWin.open();
          infoWin.setContent(
            '<div style="text-align:center;white-space:nowrap;">' +
              address +
              "</div>"
          );
          infoWin.setPosition(event.latLng);
        }, 200);
      });
    }
  },

以上便可以实现一个简单的中国各省各地区的地图（亲自试验过的）。有什么不对的地方，请联系我，帮我指正。