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一个星星!!!

相关推荐
知识分享小能手5 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军6 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy7 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端7 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿7 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉7 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~7 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
xiaoyan20159 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation10 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
给月亮点灯|10 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js