vue 结合 element-ui 实现 pc 端高德地图组件
实现的功能有：自动定位，检索地址提示，点击地图获取地址，添加工具栏，拿到的数据有经纬度，地址，名称等
项目依赖：vue-cli：3.5.3 vue：2.6.10 element-ui: ^2.7.0 等
使用步骤
1./public/index.html 文件中导入高德地图 js
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.4&key=<%=VUE_APP_AMAP_KEY%>"
></script>
1
2
3
4
2.环境变量中配置地图 key 值（也可以直接写在上面，就是不便于维护）
.env.development 和.env.production 文件中加入
VUE_APP_AMAP_KEY='' # 你的高德地图key值
1
3.地图组件 /components/Amap/index.vue
<template>
<div id="amap-container">
<el-input
id="search-input"
v-model="searchValue"
class="input-with"
placeholder="请输入地址"
clearable
@clear="handelclearInput"
@keyup.native.enter="handelSearch"
>
<el-button
slot="append"
size="small"
type="primary"
icon="el-icon-search"
@click="handelSearch"
>搜索</el-button
>
</el-input>
<div id="searchResultPanel" />
<el-row class="margin-top-10 address">
当前地址是： {{ formattedAddress }}
<el-button size="small" type="primary" @click="handelSave"
>使用该地址</el-button
>
</el-row>
<div id="custom-amap" />
</div>
</template>
<script>
const AMap = window.AMap;
export default {
name: 'AMap',
props: {
defaultValue: {
type: String,
default: ''
}
},
data() {
return {
defaultCity: '北京',
// 地图对象
map: null,
// 定位默认地址 | 搜索后选择的地址
formattedAddress: null,
// 地址对应的经纬度信息
position: {},
// 检索关键字
searchValue: '',
// 检索函数对象
placeSearch: null,
// 检索结果数据数据
searchInfoList: [],
// 地图标记
marker: '',
// 地址解析（正向）
geocoder: '',
// 地址名称
name: ''
};
},
watch: {
defaultValue() {
this.searchValue = this.defaultValue;
}
},
mounted() {
// 初始化地图页面
this.initMap();
},
beforeDestroy() {
// 销毁地图
this.map.destroy();
},
methods: {
// 初始化地图页面
initMap() {
this.map = new AMap.Map('custom-amap', {
resizeEnable: true,
zoom: 50
});
// 添加工具栏
this.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], () => {
// 工具条
const toolbar = new AMap.ToolBar();
// 比例尺
const scale = new AMap.Scale();
// 显示鹰眼
const overView = new AMap.OverView();
this.map.addControl(toolbar);
this.map.addControl(scale);
this.map.addControl(overView);
});
// 添加maker
this.setMaker();
// 添加鼠标点选地图选择地址
this.addAmapGeocoder();
// 添加定位
this.addAMapGeolocation();
// 添加检索提示
this.addAMapAutocompletePlaceSearch();
},
// 添加maker
setMaker() {
this.marker = new AMap.Marker();
this.map.add(this.marker);
// 添加解析地理位置插件
this.map.plugin('AMap.Geocoder', () => {
// 异步加载插件
this.geocoder = new AMap.Geocoder({
city: this.defaultCity, // 默认：“全国”
radius: 1000 // 范围，默认：500
});
});
},
// 添加鼠标点选地图选择地址
addAmapGeocoder() {
// 添加maker
this.setMaker();
// 地图添加点击事件
this.map.on('click', e => {
const lnglat = [e.lnglat.lng, e.lnglat.lat];
this.marker.setPosition(lnglat);
this.geocoder.getAddress(lnglat, (status, result) => {
if (status === 'complete' && result.regeocode) {
const res = result.regeocode;
const data = {
// 地址名称
adress: res.formattedAddress,
// 纬度lat
lat: lnglat[1],
// 经度lng
lng: lnglat[0]
};
this.formattedAddress = res.formattedAddress;
this.position = data;
} else {
alert(JSON.stringify(result));
}
});
});
},
// 添加自动定位
addAMapGeolocation() {
this.map.plugin('AMap.Geolocation', () => {
const geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
buttonOffset: new AMap.Pixel(200, 200),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
});
// 获取当前位置
geolocation.getCurrentPosition();
// 添加定位当前城市成功监听
AMap.event.addListener(
geolocation,
'complete',
this.onCurrentPositionComplete
);
// 添加定位当前城市发生错误监听
AMap.event.addListener(
geolocation,
'error',
this.onCurrentPositionError
);
});
},
// 添加检索提示检索
addAMapAutocompletePlaceSearch() {
// 自动提示
this.map.plugin('AMap.Autocomplete', () => {
const auto = new AMap.Autocomplete({
city: this.defaultCity,
input: 'search-input'
});
// 添加检索监听
AMap.event.addListener(auto, 'select', this.onSelectAutocomplete);
});
// 检索服务
AMap.service(['AMap.PlaceSearch'], () => {
// 构造地点查询类
this.placeSearch = new AMap.PlaceSearch({
type: '', // 兴趣点类别
pageSize: 5, // 单页显示结果条数
pageIndex: 1, // 页码
city: this.defaultCity, // 兴趣点城市
citylimit: false, // 是否强制限制在设置的城市内搜索
map: this.map, // 展现结果的地图实例
panel: 'searchResultPanel', // 结果列表将在此容器中进行展示。
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
});
// 添加检索监听
AMap.event.addListener(
this.placeSearch,
'listElementClick',
this.onSelectSearch
);
},
// 定位当前城市成功回调
onCurrentPositionComplete(res) {
// 添加maker
this.setMaker();
const lnglat = [res.position.lng, res.position.lat];
this.marker.setPosition(lnglat);
console.log(res, 'res');
this.formattedAddress = res.formattedAddress;
this.position = res.position;
},
// 定位当前城市发生错误回调
onCurrentPositionError(err) {
console.log(err);
},
// 按钮触发检索
handelSearch() {
this.placeSearch.search(this.searchValue, (status, info) => {
this.searchInfoList = info.poiList.pois;
});
},
// 选择自动提示数据事件回调
onSelectAutocomplete(e) {
this.searchValue = e.poi.name;
this.handelSearch();
},
// 选择检索数据结果事件回调
onSelectSearch(e) {
const res = e.data;
this.formattedAddress = res.cityname + res.adname + res.address;
this.name = res.name;
this.position = res.location;
},
// 清除input里的值，清除搜索结果，再次初始化map
handelclearInput() {
document.querySelector('#searchResultPanel').innerHTML = '';
},
// 保存当前选择的地址,分发事件
handelSave() {
this.searchValue = this.formattedAddress;
const { lat, lng } = this.position;
const data = {
name: this.name,
// 地址名称
address: this.formattedAddress,
// 纬度lat
lat,
// 经度lng
lng
};
this.$emit('getPosition', data);
}
}
};
</script>
<style lang="scss">
#amap-container {
.el-input__clear {
line-height: 34px;
// top: 20px;
}
#custom-amap {
height: 60vh;
width: 100%;
margin-top: 10px;
border: 1px solid #ccc;
}
.input-with {
// position: fixed;
// top: 40px;
z-index: 1;
width: 580px;
}
.address {
color: #373737;
}
}
.amap-sug-result {
z-index: 99999;
}
</style>
4.使用
<template>
<amap :default-value="postForm.detailedAddress" @getPosition="getPosition" />
</template>
<script>
import Amap from '@/components/Amap'
export default {
components: {
Amap
},
data: {
postForm: {
detailedAddress: '',
longitude: '',
latitude: ''
}
},
methods: {
// 获取地址信息
getPosition({ address, lat, lng, name }) {
this.postForm.detailedAddress = address;
this.postForm.longitude = String(lng);
this.postForm.latitude = String(lat);
}
}
};
</script>
原文链接：https://blog.csdn.net/qq_39953537/java/article/details/97105938