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

相关推荐
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说5 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录8 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店8 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app