最终效果
完整代码
子组件 -- 百度地图 src/projects/dic/VUE/Cases/getCoordinate.vue
<template>
<baidu-map @ready="loadedMap" @click="clickMap" style="height: 400px;width: 100%"
:zoom="zoom" :center="mapCenter" :scroll-wheel-zoom="true">
<!--拖拽标注点 @dragend="dragPointMarker" -->
<bm-marker :position="pointMarker"
@mouseover="overPointMarker"
animation="BMAP_ANIMATION_BOUNCE">
</bm-marker>
<bm-info-window :closeOnClick="false" :position="pointMarker"
@close="hideInfo" :show="showInfo"
>
<div style="min-width: 100px" class="info">
<p v-if="pointInfo.name">地点名称：{{pointInfo.name}}</p>
<p v-if="pointInfo.address">详细地址：{{pointInfo.address}}</p>
<p v-if="pointInfo.location">
<span style="margin-right: 10px">
经度：{{pointInfo.location.lat}}</span>
<span>
纬度：{{pointInfo.location.lng}}
</span>
</p>
</div>
</bm-info-window>
<bm-control
anchor="BMAP_ANCHOR_TOP_RIGHT"
:offset="{width: '10', height: '10'}"
>
<el-autocomplete
prefix-icon="el-icon-search"
clearable
size="mini"
v-model="place"
:fetch-suggestions="searchPlace"
placeholder="请输入关键字"
@select="selectPlace"
></el-autocomplete>
</bm-control>
<bm-city-list @changeAfter="updateRegion" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
</baidu-map>
</template>
<script>
export default {
data() {
return {
// 地图
map: '',
// 地图中心点
mapCenter: {},
// 地图缩放
zoom: 15,
// 点
point: {},
// 点信息
pointInfo: {},
// 是否展示点信息
showInfo: false,
// 标注点的坐标信息
pointMarker: {},
// 地图坐标解析器
gc: '',
// 检索地址
place: '',
// 当前行政区划
region: '北京',
}
},
methods: {
// 初始化地图
loadedMap({BMap, map}) {
//创建地址解析器实例
this.gc = new BMap.Geocoder();
this.map = map
if (this.point.lat && this.point.lng) {
this.mapCenter = this.point
this.addMarker(this.point)
this.pointInfo.location=this.point
} else {
this.mapCenter = "北京"
}
},
// 点击地图--更新点坐标，获取点信息，添加标注
clickMap(event) {
this.updatePoint(event.point)
this.getPointInfo(event.point)
this.addMarker(event.point)
},
// 搜索地点
searchPlace(queryString, cb) {
this.$http.get("/baiduMapAPI/place/v2/search", {
params: {
query: queryString,
region: this.region,
city_limit: true,
output: 'json',
ak: this.GLOBAL.baiduMapAK
}
})
.then(res => {
let results = res.data.results.map(item => {
return {
value: item.name,
...item
}
});
cb(results);
})
},
// 选择地点 -- 更新点，添加标注，调整地图视图,更新点信息，展示信息窗
selectPlace(pointInfo) {
this.updatePoint(pointInfo.location)
this.addMarker(pointInfo.location)
this.moveMap(pointInfo.location)
this.pointInfo = pointInfo
this.showInfo = true
},
// 更新点坐标
updatePoint(point) {
this.point = point
},
// 获取点信息
getPointInfo(point) {
this.pointInfo.name = ''
this.pointInfo.address = ''
let that = this
// 解析坐标点--获取坐标点所在的区域名称（城市）
that.gc.getLocation(point, function (res) {
let detailAddress = res.addressComponents
// 省-- detailAddress.province
that.region = detailAddress.city
that.place = detailAddress.district + detailAddress.street + detailAddress.streetNumber
that.pointInfo.location = point
that.pointInfo.address = that.place
that.showInfo = true
})
},
// 移动地图
moveMap(point) {
this.mapCenter = point
},
// 更新区划
updateRegion() {
// 获取地图的中心点
let point = this.map.getCenter()
let that = this
// 解析坐标点--获取坐标点所在的区域名称（城市）
that.gc.getLocation(point, function (rs) {
that.region = rs.addressComponents.city
})
},
// 设置地图缩放级别
setZoom(zoom) {
this.zoom = zoom
},
// 添加标注——跳动的点
addMarker(point) {
this.pointMarker = point
},
// 点信息浮窗——鼠标悬浮在标注点上时，显示点信息
overPointMarker() {
this.showInfo = true
},
// 点信息浮窗——点击点信息浮窗上的关闭按钮，关闭点信息浮窗
hideInfo() {
this.showInfo = false
},
}
}
</script>
<style scoped>
.info {
color: grey;
font-size: 12px;
}
</style>
父组件 src/page/test.vue
<template>
<div style="padding: 30px">
<el-form :model="formData" size="mini">
<el-form-item label="地图坐标：">
<div style="display: flex">
<el-input readonly placeholder="经度" style="width: 120px" v-model="formData.jd"></el-input>
<el-input readonly placeholder="纬度" style="width: 120px" v-model="formData.wd"></el-input>
<el-button type="text" @click="showMap" style="margin-left: 10px">获取</el-button>
</div>
</el-form-item>
</el-form>
<el-dialog title="获取地图坐标" :visible.sync="mapDialog" v-if="mapDialog" width="60%" append-to-body>
<GetCoordinate ref="map"></GetCoordinate>
<span slot="footer">
<el-button @click="mapDialog = false" size="mini">取 消</el-button>
<el-button @click="getCoordinate" size="mini" type="primary">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import GetCoordinate from '@/projects/dic/VUE/Cases/getCoordinate.vue'
export default {
components: {GetCoordinate},
data() {
return {
formData: {},
mapDialog: false,
}
},
methods: {
showMap() {
this.mapDialog = true
this.$nextTick(
() => {
if (this.formData.jd && this.formData.wd) {
this.$refs.map.updatePoint(
{
lat: this.formData.jd,
lng: this.formData.wd
}
)
}
}
)
},
getCoordinate() {
if (this.$refs.map.pointInfo.location) {
this.formData = {
jd: this.$refs.map.pointInfo.location.lat,
wd: this.$refs.map.pointInfo.location.lng,
}
this.mapDialog = false
} else {
this.$myMessage("请点击地图选择一个坐标点！")
}
}
}
}
</script>
<style scoped>
</style>
