Vue 百度地图 搜索框+点击地图获取坐标

本文通过vue+ele+百度地图,实现点击地图获取坐标,或者搜索框智能联想下拉框,点击获取坐标及地图位置标点。

百度地图通过public文件夹下index.html,script方式 引入全局 代码如下:

javascript 复制代码
<template>
    <div>
        <div id="l-map" class="baiduMap"></div>
        <el-form ref="form" :model="formData">
            <el-form-item label="位置信息" prop="unitName">
                <el-input v-model="formData.positionInfo" placeholder="请输入详细地址" id="suggestId" clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="经度" prop="lng">
                <el-input v-model="formData.lng" placeholder="请选择经度" :disabled="true">
                </el-input>
            </el-form-item>
            <el-form-item label="纬度" prop="lat">
                <el-input v-model="formData.lat" placeholder="请选择纬度" :disabled="true">
                </el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formData: {},
            map: null,
            myGeo: null,
            ac: null,
        };
    },
    components: {},
    props: {
        center: {
            type: Array,
            default: () => [108.9470400, 34.2594300]
        },
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            this.map = new BMap.Map("l-map", { enableMapClick: false });
            this.map.centerAndZoom(new BMap.Point(this.center[0], this.center[1]), 11);
            this.map.enableScrollWheelZoom(true);
            this.myGeo = new BMap.Geocoder();
            this.initAutocomplete();
            this.map.addEventListener('click', this.handleMapClick);
        },
        initAutocomplete() {
            this.ac = new BMap.Autocomplete({ input: "suggestId", location: this.map });
            this.ac.addEventListener("onconfirm", this.handleConfirm);
        },
        handleConfirm(e) {
            // 鼠标点击下拉列表后的事件
            let _value = e.item.value;
            let address = _value.province + _value.city + _value.district + _value.street + _value.business;
            this.setPlace(address);
        },
        setPlace(address) {
            this.map.clearOverlays(); // 清除地图上所有覆盖物
            const local = new BMap.LocalSearch(this.map, {
                onSearchComplete: () => {
                    const point = local.getResults().getPoi(0).point; // 获取第一个智能搜索的结果
                    const value = {
                        address,
                        position: [point.lng, point.lat],
                    };
                    this.$set(this.formData, 'lng', point.lng);
                    this.$set(this.formData, 'lat', point.lat);
                    this.$emit('getValue', value);
                    this.map.centerAndZoom(point, 15);
                    this.map.addOverlay(new BMap.Marker(point)); // 添加标注
                },
            });
            local.search(address);
        },
        handleMapClick(e) {
            this.map.clearOverlays(); // 清除地图上所有覆盖物
            const point = new BMap.Point(e.point.lng, e.point.lat);
            const marker = new BMap.Marker(point);
            this.map.addOverlay(marker);
            this.myGeo.getLocation(point, (geocoderResult) => {
                this.$set(this.formData, 'positionInfo', geocoderResult.address);
                this.$set(this.formData, 'lng', e.point.lng);
                this.$set(this.formData, 'lat', e.point.lat);
                const value = {
                    address: geocoderResult.address,
                    position: [e.point.lng, e.point.lat],
                };
                this.$emit('getValue', value);
            });
        },
    },
};
</script>

<style lang='scss' scoped>
.baiduMap {
    width: 100%;
    height: 500px;
}
</style>

效果如下:

完整代码已经上传github:https://github.com/majinihao123/vue-Component

有需要的自取,麻烦给git一个星星!!!

相关推荐
LucianaiB1 小时前
百度开源文心4.5系列开源21款模型,实测 ERNIE-4.5-VL-28B-A3B-Paddle 多项评测结果超 Qwen3-235B-A22B
百度·开源·文心大模型·paddle·gitcode
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
婉婉耶2 小时前
VUE带你乘风破浪~
前端·vue.js
乌兰麦朵3 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai3 小时前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
流星稍逝3 小时前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
OEC小胖胖3 小时前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
拾光拾趣录3 小时前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
雲墨款哥3 小时前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
独立开阀者_FwtCoder3 小时前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端