vue 高德地图API根据地址获取经纬度/根据经纬度获取地址
1.引入<script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.14&key=368a9891083b04868fe7ad3f69729b58"></script>2.初始化地图let that = this;that.map = new AMap.Map('carContainer
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>
更多推荐
所有评论(0)