mpvue中引入高德地图

# 利用 npm 下载高德地图依赖包 npm install qqmap-wx-jssdk --save

## 在高德地图官方api申请key值

### 在全局main.js中引入

 

    import "../static/qqmap-wx-jssdk.min.js";
    const qqmap = require("../static/qqmap-wx-jssdk.min.js");
    Vue.prototype.$QQMapWX = qqmap;

#### 在scr中将 qqmap-wx-jssdk.min.js 引入

##### 在template模板中写入 （注意给地图设置宽高）

 

 <div class="w_100 h150">
            <map
              class="w_100 h150"
              :latitude="map_info.lat"
              :longitude="map_info.lng"
              :markers="map_info.markers"
              show-location
              v-if="map_info.lat&&!show_device_modal && !show_setting"
            ></map>
   </div>

###### 在data文件夹中初始化地图

 

 map_info: {
        lat: 0,
        lng: 0,
        markers: [
          {
            width: "100",
            height: "100",
            id: 1,
            latitude: 0,
            longitude: 0
          }
        ]
      },

####### 在script标签中声明全局变量 var qqmapsdk;

######## 在onLoad中初始化地图实例

 

 onLoad() {
    var QQMapWX = this.$QQMapWX;
    qqmapsdk = new QQMapWX({
      key: "53ae62e71ebd2a7647d965d0b7dafc21"
    });
    this.get_lbs();
  },

########## 在methods中定义两个方法

 

 get_lbs() {
      wx.getLocation({
        type: "gcj02",
        success: res => {
          console.log(res, "444444");

          this.map_info.lat = res.latitude;//打卡经度
          this.map_info.lng = res.longitude;//打卡维度

          this.get_lbs_name(res.latitude, res.longitude);
          this.map_info.markers[0] = {
            id: 1,
            latitude: res.latitude,
            longitude: res.longitude
          };
        },
        fail: err => {
          console.log(err);
          if (
            err.errMsg == "getLocation:fail auth deny" ||
            err.errMsg == "getLocation:fail:auth denied"
          ) {
            this.show_setting = true;
          }
        }
      });
    },
    get_lbs_name(lat, lng) {
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: lat,
          longitude: lng
        },
        success: res => {
          this.edit_input[0].value = res.result.formatted_addresses.recommend;
        },
        fail: err => {
          console.log(err);
        }
      });
    },

############# 在app.json中配置提示项

 

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于上班打卡展示"
    }
  },