工作-VUE+vue-amap

背景

根据VUE+vue-amap实现定位、搜索定位、移动地图反向搜索位置。因为以前也没接触过高德地图这里，所以趁着这次机会也整理下高德相关这部分。避免后续遇到啥也不晓得～

主要其实是这两部分：

// 首先是在main.js中引入需要用到的高德插件
import AMap from 'vue-amap';

AMap.initAMapApiLoader({ 
    key: '高德的key',
    // 插件集合
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
        'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation','AMap.Geocoder']

});

具体每个插件对应什么，可以自行搜索下～

在要使用的页面的data中定义：

	searchOption: {
		city: '全国',
		citylimit: true
	},
	amapManager,
	zoom: 16,
	         center: [116.41685,40.03984],
	events: {
		init: (o) => {
			o.getCity((result) => {
				console.log(result,'init======');
			});
		},
		mouseup: (e) => {
			this.center = [e.lnglat.lng, e.lnglat.lat];
			this.getMapAddress(this.center);
		},
	},
	plugins: [
		{
			pName: "Geocoder", //使用AMap.Geocoder插件
			events: {
				init(o) {
					Geocoder = o; // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用了
                          that.getMapAddress(that.center);
				},
			},
		},
	],
	chooseCity: '北京',
	address:'',
	addressList:[],
    contacts: '',
    phoneNum: '',
	cityId: '',
}

// 搜索可用的组件
<el-amap-search-box
    class="search-box"
    :search-option="searchOption"
    :on-search-result="onSearchResult"
></el-amap-search-box>

搜索组件自定义的样式

.search-box {
	border: 1px solid #e5e5e5;
	width: 320px;
	display: flex;
	box-shadow: none;
	height: 32px;
	margin-left: 10px;
	color: #333;
    font-size: 12px;
}

高德地图组件

// 高德地图
<el-amap 
	ref="map" 
	vid="container" 
	:center="center" 
	:zoom="zoom"
	class="map-wrap"
	:events="events"
	:amap-manager="amapManager"
	:plugin="plugins"
>
	<el-amap-marker 
		:position="center"
		vid="marker"
		ref="marker"
	></el-amap-marker>
</el-amap>

根据高德原生SDK，参考高德文档进行地理位置经纬度转换

getMapLocation(val) {
	Geocoder.getLocation(val, (status, result) => {
        if (status === "complete" && result.info === "OK") {
			const location = result.geocodes[0].location;
            this.center = [location.lng, location.lat]
		}
	})
},


// 根据经纬度获取地理位置
getMapAddress(val) {
	Geocoder.getAddress(val, (status, result) => {
		if (status === "complete" && result.info === "OK") {
			this.address = result.regeocode.formattedAddress;
            this.address && (document.querySelector(".search-box-wrapper input").value = this.address);
		}
	})
},