Vue和腾讯地图之相遇

Vue和腾讯地图之相遇

掘金地址：https://juejin.im/post/5d5e2ab3f265da03a9503cba

一、前期准备

    第一步：申请腾讯地图key
    
    第二步：安装qqmap依赖：npm install qqmap --save
    
    第三步：在index.html中引入JS文件
    <script type="text/javascript" src="http://map.qq.com/api/js?v=2.exp&key=自己申请的key"></script>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

二、结合项目说一下使用方法

注：项目中主要用到

    1、获取定位
    2、附近地址
    3、腾讯地图的选点组件
    4、位置展示组件

1. 在mixins目录下新建一个TMap.js文件（异步加载所需js）

    import maps from 'qqmap';

    export function TMap() {
      let that = this;
      return new Promise(resolve => {
        maps.init(that.$mapKey, () => {
          resolve(maps);
        });
      });
    }

2. 在main.js中引入该文件，并抛出作为全局对象使用

    import { TMap } from './mixins/TMap';
    Vue.prototype.$TMap = TMap;
    // 这样在页面中就可以用this.$TMap了

3. 接下来就是正式使用腾讯地图了（主要应用场景如下）

    A、登录时获取Map对象，并存入vuex
    
    // 由于项目是嵌入在其他APP里面的，实际就是H5页面而已，用户无法刷新页面，所以不用担心Map对象会因为页面刷新而丢失
    async setMap() {
      const map = await this.$TMap();
      this.$store.commit('setTxMap', map);
      // QQMap是一个全局js文件中定义的
      this.QQMap = this.$store.state.txMap;
    }
    
    B、主要方法
    
     /**
     * 获取当前经纬度
     * @returns {Promise<any>}
     */
     getCurrentPoint() {
        this.QQMap = this.$store.state.txMap;
        let geolocation = new this.QQMap.maps.Geolocation(this.$mapKey, 'myMap');
        let options = {timeout: 15000};
        return new Promise((resolve, reject) => {
            geolocation.getLocation(position => {
              resolve(position);
            }, err => {
              reject(err);
            }, options);
        });
     }