# Use npm to download the AutoNavi map dependency package npm install qqmap-wx-jssdk --save
## Apply for key value in the official api of Gaode map
### Introduce in global main.js
import "../static/qqmap-wx-jssdk.min.js";
const qqmap = require("../static/qqmap-wx-jssdk.min.js");
Vue.prototype.$QQMapWX = qqmap;
#### Introduce qqmap-wx-jssdk.min.js in scr
##### Write in the template (note the width and height of the map)
<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>
###### Initialize the map in the data folder
map_info: {
lat: 0,
lng: 0,
markers: [
{
width: "100",
height: "100",
id: 1,
latitude: 0,
longitude: 0
}
]
},
####### Declare global variables var qqmapsdk;
######## Initialize the map instance in onLoad
onLoad() {
var QQMapWX = this.$QQMapWX;
qqmapsdk = new QQMapWX({
key: "53ae62e71ebd2a7647d965d0b7dafc21"
});
this.get_lbs();
},
########## Define two methods in 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);
}
});
},
############# Configure prompt items in app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于上班打卡展示"
}
},