?1.引入
<script type="text/javascript"?src="https://webapi.amap.com/maps?v=1.4.14&key=xxxxxxxxxxxxxx"></script>
2.初始化地图
? ? ? let that = this;
? ? ? that.map = new AMap.Map('carContainer', {
? ? ? ? resizeEnable: true,
? ? ? })
? ? ? // 为地图注册click事件获取鼠标点击出的经纬度坐标
? ? ? that.map.on('click', function (e) {
? ? ? ? var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
? ? ? ? that.init(lnglatXY)
? ? ? });
3.地址获取经纬度
let _this = this;
? ? ? window.AMap.plugin('AMap.PlaceSearch', function () {
? ? ? ? var autoOptions = {
? ? ? ? ? city: '全国',
? ? ? ? ? map: _this.map, // 展现结果的地图实例
? ? ? ? ? pageSize: 1, // 单页显示结果条数
? ? ? ? ? pageIndex: 1, // 页码
? ? ? ? ? autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
? ? ? ? };
? ? ? ? var placeSearch = new window.AMap.PlaceSearch(autoOptions);
? ? ? ? placeSearch.search(_this.formInline.text, function (status, result) {
? ? ? ? ? // 搜索成功时，result即是对应的匹配数据
? ? ? ? ? if (status == 'complete') {
? ? ? ? ? ? if (result.poiList.pois.length = 0) {
? ? ? ? ? ? ? ElMessage.error('没有查询到对应的地址');
? ? ? ? ? ? }else{? ??
? ? ? ? ? ? ? ? ?let lng = result.poiList.pois[0].location.lng;
? ? ? ? ? ? ? ? ?let lat = result.poiList.pois[0].location.lat
? ? ? ? ? ? }
? ? ? ? ? } else if (status == 'no_data') {
? ? ? ? ? ? ElMessage.error('没有查询到对应的地址');
? ? ? ? ? }
? ? ? ? });
? ? ? });
4.经纬度获取地址
AMap.plugin('AMap.Geocoder', function () {
? ? ? ? var geocoder = new AMap.Geocoder({
? ? ? ? ? radius: 1000,
? ? ? ? ? extensions: "all"
? ? ? ? });
? ? ? ? geocoder.getAddress(lnglatXY, function (status, result) {
? ? ? ? ? if (status === 'complete' && result.info === 'OK') {
? ? ? ? ? ? var address = result.regeocode.formattedAddress;
? ? ? ? ? ? that.address = address ?//兑换地址
? ? ? ? ? ? that.$emit('getaddress', that.address, lnglatXY)
? ? ? ? ? } else {
? ? ? ? ? ? ElMessage.error('无地址，请重新选择');
? ? ? ? ? }
? ? ? ? });
? ? ? ? // 清除所有标记
? ? ? ? that.map.clearMap();
? ? ? ? var marker = new AMap.Marker();
? ? ? ? that.map.add(marker);
? ? ? ? marker.setPosition(lnglatXY);
? ? ? })
?完整代码
<template>
<el-dialog
title="客户地址"
v-model="Visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="1000px"
@close="addressClose"
>
<div>
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline"
>
<el-form-item
label="查询"
v-if="0"
>
<el-input
v-model="formInline.text"
placeholder="请输入要搜索的地址"
></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="formInline.text"
placeholder="请输入要搜索的地址"
style="width:500px;"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="onQuery"
>查询</el-button>
</el-form-item>
</el-form>
<div id="carContainer"></div>
</div>
</el-dialog>
</template>
<script>
import AMap from 'AMap'
import { ElMessage } from "element-plus";
export default {
props: {
locationVisible: {
type: Boolean,
default: true
},
customerAddress: {
type: String,
default: ''
}
},
emits: ['getaddress', 'addressClose'],//这里需要写出定义的事件名
data () {
return {
formInline: {
text: ''
},
map: null,
address: '',
Visible: false
};
},
watch: {
locationVisible (val) {
if (val) {
this.Visible = true
// 在这里使用$nextTick初始化地图插件即可
this.$nextTick(() => {
this.ready()
});
} else {
this.Visible = false
}
},
customerAddress (val) {
this.formInline.text = val
}
},
mounted () {
window.onLoadMap = () => {
this.ready();
};
},
methods: {
addressClose () {
this.$emit('addressClose')
},
// 查询
onQuery () {
this.init1()
},
// 初始化
ready () {
let that = this;
that.map = new AMap.Map('carContainer', {
resizeEnable: true,
})
// 为地图注册click事件获取鼠标点击出的经纬度坐标
that.map.on('click', function (e) {
var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
that.init(lnglatXY)
});
if (this.formInline.text) {
that.onQuery()
}
},
// 地址获取经纬度
// let lng = result.poiList.pois[0].location.lng;
// let lat = result.poiList.pois[0].location.lat;
// _this.longAndLat = lng + ',' + lat;
// _this.addMarker(lng, lat);
init1 () {
let _this = this;
window.AMap.plugin('AMap.PlaceSearch', function () {
var autoOptions = {
city: '全国',
map: _this.map, // 展现结果的地图实例
pageSize: 1, // 单页显示结果条数
pageIndex: 1, // 页码
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
};
var placeSearch = new window.AMap.PlaceSearch(autoOptions);
placeSearch.search(_this.formInline.text, function (status, result) {
// 搜索成功时，result即是对应的匹配数据
if (status == 'complete') {
if (result.poiList.pois.length = 0) {
ElMessage.error('没有查询到对应的地址');
}
} else if (status == 'no_data') {
ElMessage.error('没有查询到对应的地址');
}
});
});
},
//经纬度获取地址
init (lnglatXY) {
var that = this
AMap.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(lnglatXY, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
var address = result.regeocode.formattedAddress;
that.address = address //兑换地址
that.$emit('getaddress', that.address, lnglatXY)
} else {
ElMessage.error('无地址，请重新选择');
}
});
// 清除所有标记
that.map.clearMap();
var marker = new AMap.Marker();
that.map.add(marker);
marker.setPosition(lnglatXY);
})
},
}
}
</script>
<style lang="scss" scoped>
.el-dialog {
#carContainer {
width: 100%;
height: 500px;
}
}
</style>
?
