vue中使用百度地图 完成展示坐标，点击坐标展示相关信息

效果如图

一、引入百度地图

第1步：在 index.html 中引入下面代码，注意将你的AK代入

<script type=“text/javascript” src=“http://api.map.baidu.com/api?v=3.0&ak=您的密钥”></script>

第2步：在 webpack.base.conf.js 添加externals.BMap配置，与entry平级，内容如下，

entry: {
  app: ['babel-polyfill', './src/main.js']
},
externals: {
  BMap: 'BMap'
}

如果你的项目的所有配置都在vue.config.js中的那就是在这里配置

    configureWebpack: {
        name: name,
        resolve: {
            alias: {
                '@': resolve('src')
            }
        },
        externals: {
            "BMap": "BMap"
        }
    },

第3步：在组件中引入BMap

import BMap from ‘BMap’

示例代码

<template>
    <div class="pos-monitor">
        <div class="header">
            <el-input class="header-item" v-model="form.number" placeholder="请输入账号" clearable></el-input>
            <el-input class="header-item" v-model="form.posDeviceId" placeholder="请输入设备编号" clearable></el-input>
            <el-input class="header-item" v-model="form.address" placeholder="请输入安装地址" clearable></el-input>
            <div class="header-item">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="info" @click="resetForm">重置</el-button>
            </div>

        </div>
        <div id="map" style="height:90vh; width:100%">
            <!-- 百度地图部分 占坑 -->
        </div>
    </div>
</template>

<script>
import BMap from "BMap"; // 百度地图
import { getlocation } from "@/api/posMonitor/posMonitor.js"
export default {
    data() {
        return {
            map: '', //地图实例
            form: {
                number: '', // imei号
                posDeviceId: '', // 设备编号
                address: '', // 安装地址
            },
            virData: [] // 坐标数据 [{longitude: 116.958471, latitude: 39.785079, title: '标题'...}]
        }
    },
    mounted() {
        this.createMap();
    },
    methods: {
        //地图初始化
        createMap() {
            // 创建Map实例
            this.map = new BMap.Map("map");
            // 坐标点为西安市雁塔区
            let point = new BMap.Point(108.952789, 34.224861)
            // 设定地图的中心点和坐标并将地图显示在地图容器中 
            this.map.centerAndZoom(point, 13)
            //添加地图类型控件
            this.map.addControl(
                new BMap.MapTypeControl({
                    mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
                })
            );
            this.map.setCurrentCity("西安");  // 设置地图显示的城市 此项是必须设置的
            this.map.enableScrollWheelZoom(true);  // 开启鼠标滚轮缩放
            this.mkLocation() // 绘制marker

        },

        // 设备定位(绘制marker)
        mkLocation() {
            this.map.clearOverlays() // 清除地图上所有覆盖物
            getlocation(this.form).then((res) => {
                console.log('反参', res)
                if (res.code == 200) {
                    if (res.rows.length == 0) return // 若接口返回空数组 直接退出
                    this.virData = res.rows
                    console.log('数据', this.virData)
                    this.map.setCenter(new BMap.Point(this.virData[0].longitude, this.virData[0].latitude)) // 重新设置地图中心点
                    this.virData.map((item) => {
                        let message = `
                            <div style="margin-bottom: 10px; margin-top: 10px;">
                                <span>设备类型：</span>
                                <span>${item.devType == 1 ? 'HHH' : 'aaaa'}</span>
                            </div>
                            <div style="margin-bottom: 10px">
                                <span>是否启用：</span>
                                <span>${item.userFlag == 1 ? '启用' : '未启用'}</span>
                            </div>
                            <div style="margin-bottom: 10px">
                                <span>创建时间：</span>
                                <span>${item.createTime	|| " "}</span>
                            </div>
                            `
                        let point = new BMap.Point(item.longitude, item.latitude)
                        let mk = new BMap.Marker(point, { enableDragging: false })  // 创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
                        this.map.addOverlay(mk)  // 将覆盖物添加到地图中
                        this.addClickHandler(message, mk) // 点击marker显示信息窗体
                    })
                }
            }).catch((error) => {
                console.log(error)
                this.$message.error(error)
            })


        },

        // 点击marker展示坐标信息
        addClickHandler(message, mk) {
            let _this = this
            mk.addEventListener("click", function (e) {
                let p = e.target;
                let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                let infoWindow = new BMap.InfoWindow(message, {
                    width: 320, // 信息窗口宽度
                    height: 200, // 信息窗口高度
                    // title: '监控信息', // 信息窗口标题ee
                    enableMessage: false, //设置允许信息窗发送短息
                    message,
                }); // 创建信息窗口对象
                _this.map.openInfoWindow(infoWindow, point); //开启信息窗口
            })
        },

        // 搜索
        search() {
            this.mkLocation()
        },

        // 重置表单
        resetForm() {
            this.form.number= ''
            this.form.posDeviceId = ''
            this.form.address = ''
            this.mkLocation()
        }

    }
}
</script>


<style lang="scss" scoped>
.pos-monitor {
    position: relative;
    width: 100%;
    height: 100%;

    .header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: white;
        width: 85%;
        height: 55px;
        line-height: 55px;
        padding-left: 30px;
        margin: auto;
        box-shadow: #eeeeee 2px 2px 2px 3px;
        border-radius: 10px;
        font-weight: bolder;
        z-index: 200;
        position: absolute;
        opacity: 0.8;
        left: 6%;
        top: 2%;

        .header-item {
            flex: 1;
            margin-right: 10px;
        }
    }

    .header:hover {
        opacity: 1;
        box-shadow: #cecece 5px 3px 5px 3px;
        //  height: 55px;
        //  line-height: 55px;
    }
}
</style>