<el-input
v-model.trim="searchLocation"
placeholder="请输入地址搜索"
maxlength="30"
clearable
@blur="getLocation"
@keyup.enter.native="getLocation"
/>
<div id="container" />
data() {
return {
searchLocation: '',
ruleForm: {},
map: null,
marker: null
}
},
mounted() {
this.initMap()
this.setLocal()
},
methods: {
// 初始化地图
initMap() {
this.map = new AMap.Map('container', {
zoom: 9, // 级别
center: [116.397428, 39.90923] // 中心点坐标
// viewMode: "3D", // 使用3D视图
})
this.marker = new AMap.Marker()
this.map.on('click', this.clickMap) // 地图是否允许点击
},
setLocal(longitude, latitude) {
if (this.marker) {
this.marker.setMap(null)
}
if (!longitude) {
this.map.setCenter([116.397428, 39.90923])
return
}
this.map.setCenter([longitude, latitude])
if (longitude) {
const lnglat = new AMap.LngLat(longitude, latitude)
this.marker.setPosition(lnglat)
this.marker.setMap(this.map)
this.map.setFitView(this.marker)
}
},
clickMap(e) {
this.searchLocation = ''
this.ruleForm.longitude = e.lnglat.lng
this.ruleForm.latitude = e.lnglat.lat
this.$set(this.ruleForm, 'coordinate', e.lnglat.lng + ',' + e.lnglat.lat)
this.marker.setPosition(e.lnglat)
this.map.add(this.marker)
this.map.setFitView(this.marker)
},
getLocation() {
const geocoder = new AMap.Geocoder({
city: '全国' // 城市设为北京,默认:“全国”
})
geocoder.getLocation(this.searchLocation, (status, result) => {
if (status === 'complete' && result.geocodes.length) {
const lnglat = result.geocodes[0].location
this.$set(this.ruleForm, 'longitude', result.geocodes[0].location.lng)
this.$set(this.ruleForm, 'latitude', result.geocodes[0].location.lat)
this.$set(this.ruleForm, 'coordinate', result.geocodes[0].location.lng + ',' + result.geocodes[0].location.lat)
this.marker.setPosition(lnglat)
this.map.add(this.marker)
this.map.setFitView(this.marker)
} else {
console.error('根据地址查询位置失败')
}
})
},
}
vue2使用高德地图点击或搜索获取经纬度
于 2023-03-28 18:21:10 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)