背景
根据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);
}
})
},