VUE使用地图获取位置坐标（国内）

• 先看是效果图

• 

• 通过npm安装vue-amap模块

• npm install --save vue-amap

• 在main.js中引用vue-amap

• import VueAMap from 'vue-amap'
  
  Vue.use(VueAMap)
  
  VueAMap.initAMapApiLoader({
    key: 'xxxx', //高德开放平台申请的key
    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
    uiVersion: '1.0', // ui库版本，不配置不加载,
    v: '1.4.4',
    plugin: ['AMap.Geolocation'],
    plugin: ['AMap.Geocoder'] /* , 'AMap.Geocoder' */
  
  })

• 写入vue 地图页面（命名为map.vue）便于项目各个页面调用

• <template>
  	<div class="amap-page-container">
  		<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
  		<el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :events="events">
  			<el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
  		</el-amap>
  		<div class="toolbar">position: [{{ lng }}, {{ lat }}] address: {{ address }}</div>
  	</div>
  </template>
  
  <style>
  .el-vue-amap-container.amap-demo {
  	width: 960px;
  	height: 516px;
  }
  .search-box {
  	position: absolute;
  	top: 55px;
  	left: 20px;
  }
  .amap-page-container {
  	position: relative;
  }
  </style>
  
  <script>
  export default {
  	name: 'mymap',
  	data: function() {
  		let self = this;
  		return {
  			zoom: 20,
  			center: [121.52014, 31.198862],
  			searchOption: {
  				city: '',
  				citylimit: true
  			},
  			marker: {
  				position: [121.52014, 31.198862]
  			},
  			mapInfo: {
  				address: '',
  				lng: '',
  				lat: ''
  			},
  			address: '',
  			events: {
  				click(e) {
  					let { lng, lat } = e.lnglat;
  					self.lng = lng;
  					self.lat = lat;
  					self.mapInfo.lat = lat;
  					self.mapInfo.lng = lng;
  					self.marker.position = [lng, lat];
  					// 这里通过高德 SDK 完成。
  					// AMap.plugin(["AMap.Geocoder"]),function(){
  					var geocoder = new AMap.Geocoder({
  						radius: 1000,
  						extensions: 'all',
  						city: ''
  					});
  					geocoder.getAddress([lng, lat], function(status, result) {
  						if (status === 'complete' && result.info === 'OK') {
  							if (result && result.regeocode) {
  								self.address = result.regeocode.formattedAddress;
  								self.mapInfo.address = result.regeocode.formattedAddress;
  								self.$emit('listenToMap', self.mapInfo);
  								self.$nextTick();
  							}
  						}
  					});
  
  					// }
  				}
  			},
  			lng: 0,
  			lat: 0
  		};
  	},
  	methods: {
  		onSearchResult(pois) {
  			console.log(pois, 'pois');
  			var lng = pois[0].lng;
  			var lat = pois[0].lat;
  			this.lng = pois[0].lng;
  			this.lat = pois[0].lat;
  			this.center = [lng, lat];
  			this.marker.position = [lng, lat];
  			this.address = pois[0].name;
  			this.mapInfo.lat = lat;
  			this.mapInfo.lng = lng;
  			this.mapInfo.address = pois[0].name;
  			this.$emit('listenToMap', this.mapInfo);
  		}
  	}
  };
  </script>
  

• 然后使用地图的页面开始调用地图组件
• 加载高德SDK

• <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxx&plugin=AMap.Geocoder"></script>
  <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

• 引用页面路径（根据自己的组件路径进行修改）

• import map from '../map/map.vue';

• 加载组件

• components: {
      map
    },

• 页面引用

•  <el-dialog :visible.sync="show" title="地图定位" width="1000px" height="600px" append-to-body>
            <map @listenToMap="showMapInformation" />
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="confirm">确定</el-button>
              <el-button @click="cancel">取消</el-button>
            </div>
  </el-dialog>

   /* 高德地图 */
      showMapInformation(data) {
        console.log('地图位置数据' + JSON.stringify(data));
        console.log('地图位置数据' + JSON.stringify(data.address));
      },

  这样就能获取当前位置的信息 在方法里面自行解析所需的数据