To get the current location, vue-amap is amap component based on vue 2.0 and amap.

Use steps:

1. Install

NPM install -s vue-amap // Check whether package. Json is installedCopy the code

2. Import in the import file main.js

Import VueAMap from 'vue-amap' vue.config. productionTip = false vue.use (VueAMap); import VueAMap from 'vue-amap' vue.config. VueAMap.initAMapApiLoader({ key: 'your amap key', plugin: [' amap. Autocomplete', 'amap. PlaceSearch', // POI search plugin' amap. Scale', // lower right thumbnail plugin Scale' amap. OverView', 'amap. ToolBar', // map bar 'amap. MapType',' amap. gpolyeditor ', 'amap. CircleEditor',// CircleEditor plugin' amap. Geolocation'// position control, // The default AUtonavi SDK version is 1.4.4V: '1.4.4'});Copy the code

3. In the. Vue file

<div class=" getLocation "></ div> <el-amap vid="amap" :plugin="plugin" class="amap ":center="center"></el-amap> <div class="toolbar"> <span v-if="loaded">location: LNG = {{LNG}} lat = {{lat}}</span> <span V-else > Export default {data() {let self = this; Return {center: [121.59996, 31.197646], LNG: 0, Lat: 0, loaded: false, plugin: [{pName: "Geolocation", // location events: {init(o) {// o is an instance of the autonavi plugin. Getcurrentposition ((status, result) => { if (result && result.position) { console.log(status, result); self.lng = result.position.lng; Self.lat = result.position.lat; self.center = [self.lng, self.lat]; self.loaded = true; self.lat = result.position.lat;  self.$nextTick(); } }); } } } ] }; }, style.getlocation{margin-left:4rem; font-size:15px; font-weight: 500; Margin - top: 0.3 rem; } .amap-demo { height: 15rem; Margin - top: 0.3 rem; }Copy the code

This is the function of obtaining the current position that I did in the development. The latitude and longitude of the current position can be obtained through vuE-AMAP plug-in, which is based on the positioning function of AmAP.