vue-baidu-map 百度地图检索、获取坐标_vue baidu map 检索

最终效果

完整代码

子组件 -- 百度地图  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>