vue使用高德地图web端JS API（vue-amap插件）

高德地图地图 JS API v2.0：https://lbs.amap.com/api/jsapi-v2/summary/
vue-amap(基于Vue 2.0和高德地图的地图组件):https://elemefe.github.io/vue-amap/#/

1、npm安装vue-amap
npm install vue-amap --save
2、main.js初始化vue-amap

import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({
  key: '在高德地图平台申请的key',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder','AMap.ElasticMarker']//一些需要用到的插件
})

3、在页面中使用

<template>
	<div id="container"></div>
	<input id="key-input" placeholder="请输入关键字"/>
</template>
<script>
	export default{
		data(){
			return{
				map:''
			}
		},
		mounted(){
			// 初始化地图,初始化要放在$nextTick里面,一开始使用的话会找不到id="container"的DMO
			this.$nextTick(() => {
				this.init()
			})
		},
		methods:{
			init(){
				let that = this
				// 初始化
				this.map = new AMap.Map('container', {
					resizeEnable: true
				})
				// 输入框输入事件
				var autoOptions = {
					input: 'key-input'
				}
				var auto = new AMap.Autocomplete(autoOptions)
				var placeSearch = new AMap.PlaceSearch({
					map: that.map,
					extensions: 'all',
					children: 1
				})
				// 展示下拉选项
				AMap.event.addListener(auto, 'select', function(e) {
					placeSearch.setCity(e.poi.adcode)
					placeSearch.search(e.poi.name)
					let data = {
						poiAddress: e.poi.name,
						region: e.poi.adcode
					}
					that.mapData = data
				})
				// 地图鼠标点击事件
				this.map.on('click', (e) => {
					let lng = e.lnglat.lng
					let lat = e.lnglat.lat
					let marker = new AMap.Marker({
						position: new AMap.LngLat(lng, lat)
					})
					// 根据点击地图的经纬度获取地址详情
					let geocoder = new AMap.Geocoder({ batch: false, city: '' })
					geocoder.getAddress([lng, lat], function(status, res) {
						if (res.info == 'OK') {
							// 显示点标志的信息窗口
							let infoWindow = new AMap.InfoWindow({
									anchor: 'top-left',
									content: res.regeocode.formattedAddress
							})
							infoWindow.open(that.map, [lng, lat])
						}
					})
					that.map.clearMap()// 清除所有覆盖物（点标志）
					that.map.add(marker)// 添加点标志
				})
			}
		}
	}
</script>
//先初始化

创建地图后

输入框输入事件

地图鼠标点击事件，根据点击地图的经纬度获取地址详情，清除所有覆盖物（点标志），添加点标志

ps：高德地图有一些地区获取有问题，是高德地图自身的问题。比如台湾省，只能获取到省份，区、县都获取不了。。。
pps：如果涉及到敏感问题，请联系删除。谢谢