效果
代码： public/index.html引入，在</body>标签上 lng是经度 lat是纬度
1.<!--高德地图js-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=2d5879db229ad4cca377758bc00ecd93&plugin=AMap.Driving"></script>
2.父页面引用的对象弹框
<el-dialog title="选择地址" :visible.sync="mapOpen" width="1000px" append-to-body :closeOnClickModal=false>
<Amap v-if="mapOpen" ref="map" :longitude="form.lng" :latitude="form.lat" />
<div v-show="!isReadOnly" slot="footer" class="dialog-footer">
<el-button type="primary" @click="getMap">确 定</el-button>
<el-button @click="hideMap">取 消</el-button>
</div>
</el-dialog>
getMap() {
this.form.lng = this.$refs.map.position.lng;
this.form.lat = this.$refs.map.position.lat;
// this.form.bizAddr = this.$refs.map.position.adress;
this.mapOpen = false;
},
hideMap() {
this.mapOpen = false;
}
3.引用的页面
<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 style="margin-top: 10px;" class="margin-top-10 address">
当前地址是： {{ formattedAddress }}
</el-row>
<el-row style="margin-top: 10px;" class="margin-top-10 address">
经度：{{position.lng}} <span style="margin-left: 2%"> 纬度：{{position.lat}} </span>
</el-row>
<div style="height:390px;" 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;
}
},
// 父组件传来的参数
props: [
'longitude',
'latitude',
// 'bizAddr'
],
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(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：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
let lnglat = [];
if(this.longitude != null){
lnglat = [this.longitude, this.latitude];
// this.formattedAddress = this.bizAddr;
const pos = {"lng":this.longitude, "lat":this.latitude};
this.position = pos;
}else{
lnglat = [res.position.lng, res.position.lat];
this.formattedAddress = res.formattedAddress;
this.position = res.position;
}
//this.setMaker();
this.marker.setPosition(lnglat);
this.map.setCenter(lnglat);
},
// 定位当前城市发生错误回调
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>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
