今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度。
这是vue-amap的官网文档：https://elemefe.github.io/vue-amap/#/
这是我的码云项目的地址：http://git.oschina.net/ye_a_rs/project-vue-ele/tree/master/src
- 用 vue init webpack 项目名称 创建一个项目
- npm安装vue-amap组件 ：
npm install vue-amap --save
- 在main.js引入vue-amap ：
import Vue from 'vue'; import AMap from 'vue-amap'; import App from './App.vue'; Vue.use(AMap); AMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'，'AMap.Geolocation'] }); new Vue({ el: '#app', render: h => h(App) }) - 在initAMapApiLoader里面用到什么插件就在plugin里面写什么插件名；
如果用到定位，就在app.vue这样写：
<template> <div id="app"> <router-view name='index'></router-view> <router-view name='others'></router-view> <el-amap vid="amap" :plugin="plugin" class="amap-demo"></el-amap> <router-view></router-view> <!-- <foot></foot> --> </div> </template> <script> // import foot from './components/Footer'; export default { name: 'app', data() { let self = this; return { positions: { lng: '', lat: '', address: '', loaded: false }, center: [121.59996, 31.197646], plugin: [{ pName: 'Geolocation', events: { init(o) { // o 是高德地图定位插件实例 o.getCurrentPosition((status, result) => { // console.log(result); // 能获取定位的所有信息 if (result && result.position) { self.str = result.formattedAddress; self.positions.address = self.str.substring(self.str.indexOf('市') + 1); self.positions.lng = result.position.lng; self.positions.lat = result.position.lat; self.positions.loaded = true; self.$nextTick(); // 把获取的数据提交到 store 的数据中，以便其他单文件组件使用 self.$store.commit('POSITION', self.positions); // console.log(self.positions); sessionStorage.setItem('id', JSON.stringify(self.positions)); } }); } } }] }; } // components: { foot } } </script> <style lang='scss'> @import '../static/hotcss/px2rem.scss'; @import './common/css/resert.scss'; #app { height: 100%; .amap-demo { display: none; } } </style> - 在pName:写入'Geolocation'，并在main.js的AMap.initAMapApiLoader引入‘AMap.Geolocation’，在app里写以上代码，定位的所有信息都在o.getCurrentPosition((status, result) 的result里，再对里面进行解析、获取，可以将经纬度和地址通过sessionStorage的setItem储存。