vue中使用百度地图 完成展示坐标，点击坐标展示相关信息_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'
}
1
2
3
4
5
6

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

    configureWebpack: {
        name: name,
        resolve: {
            alias: {
                '@': resolve('src')
            }
        },
        externals: {
            "BMap": "BMap"
        }
    },
1
2
3
4
5
6
7
8
9
10
11

第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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170