今天我就講了一下怎么通過vue和高德地圖開發(fā)的vue-amap組件來獲取經(jīng)緯度。

　　這是vue-amap的官網(wǎng)文檔：https://elemefe.github.io/vue-amap/#/

　　這是我的碼云項(xiàng)目的地址：http://git.oschina.net/ye_a_rs/project-vue-ele/tree/master/src

• 用 vue init webpack 項(xiàng)目名稱 創(chuàng)建一個(gè)項(xiàng)目
  
• 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 是高德地圖定位插件實(shí)例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();// 把獲取的數(shù)據(jù)提交到 store 的數(shù)據(jù)中，以便其他單文件組件使用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里，再對里面進(jìn)行解析、獲取，可以將經(jīng)緯度和地址通過sessionStorage的setItem儲(chǔ)存。

轉(zhuǎn)載于:https://www.cnblogs.com/don-yang/p/8670782.html

總結(jié)

以上是生活随笔為你收集整理的基于vue 2.X和高德地图的vue-amap组件获取经纬度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。