vue脚手架开发+百度地图API的使用（带实例）

2023-12-13 13:59| 来源: 网络整理| 查看: 265

学习目标：

在vue开发中彻底把 —— 百度地图API ——如何引用学会看了我写的这篇文章，你一定可以的。

项目背景说明：

最近这几天在写vue项目，遇到要用百度地图API的情况，故上网去搜索，无奈方法五花八门，根本一点都不系统，而且有的文章完全胡说八道。按他的方法根本地图都出不来，用最近比较流行的一句话概括：在这里插入图片描述好了废话不多说，直接来吧。

个人总结的使用方法：

【步骤1】直接在你搭建好的vue项目的public文件夹中的——index.html——的body结束标签上面引入下面这行代码【很多文章都说要在项目中——npm install vue-baidu-map –save 个人觉得没必要，至少我没有这样做】

至于密钥就不多说了，网上是对的哈哈。步骤原理分析：vue是单页面开发，所以不管如何它始终只是把index.html解析成最终的页面而已，就像我们写一个HTML页面一样，是不是也可以在body的结束标签上面引入JS文件一样呢？一样的道理嘛！

【步骤2】类似于引用Echarts一样的手法需要先写一个div之类的来装地图（绑定一个dom），让地图能有地方展示出来

好了，万事俱备只欠东风，这里啰嗦两句，如果你想把地图部分搞成一个组件，然后在父组件中引入的话，这样我觉得没得必要，【我师父说的，那我肯定要听话，事实证明师父是不会错的哈哈】原因很简单，父组件调用子组件的方法确实麻烦啊。而且还涉及到传参啊之类的

【步骤3】在你当前组件的methods里面写方法来配置你的地图（具体配置可以参考百度地图API文档示例demo）说简单点：直接粘贴复制过来自己改配置就行了下面是我自己写的配置项

methods: { 此处说明下，map我已经在data里面定义好了为false，所以才是this.map 其主要目的就是后面的功能需要，你也可以直接在这里定义map myMap() { this.map = new BMapGL.Map("bdMap"); // 创建Map实例注意要和你上面写的div的id名一样 this.map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 12); // 初始化地图,设置中心点坐标和地图级别 this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 //这里的配置很多，就不一一说明了， }, mounted() { //最后需要在mounted钩子里面调一次你自己定义的方法 this.myMap(); },

【步骤4】最后再调整一下CSS就行了

#bdMap { overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; }

这样最基本的引用就可以实现了。

进阶使用：

直接说这个功能的需求吧——实现点击城市名按钮，然后要在地图上面切换到具体的城市去，最好此时在地图上面要有一个城市的提示信息自动提示。有一说一，这个功能实现起来还是有一点的难度的，但是，俺们是那种轻言放弃的人吗？来吧，上代码

页面结构部分简单说一下页面HTML代码： CSS部分我用CSS3中的伪元素通过定位的方式实现二级菜单的基本样式就不用多说了

这里写成这样是因为不好使用v-for来循环只有一个单独的li 所以干脆在data下面的——company数组里面再多加了一个对象，用company[0]来表示 {{ company[0].name }} 外层嵌套div的目的是因为脚手架语法检查太严格了，不允许使用 v-for 后面还加一个 v-if 所以就套了一个div来实现循环里面的li来实现判断这里可以看出来循环出的每个li都有一个点击函数接收一个i作为参数然后索引i >0代表只循环数组第二项开始后面的项 {{ item.name }}

JS部分

data() { return { map: false,这里是点睛之笔啊，这一步起很大的作用，目的是让map在其他函数里面也能调用，因为文档上面的demo不是用vue写的，所以它配置了一些基本项以后直接就在后面写XXX函数之类的来实现功能，但是vue不行啊，之前我们不是在methods里面写了一个myMap这个函数吗，但是你不可能直接在它里面再写一个函数吧，这样直接会报错的，所以你得在外面写一个点击函数来控制它的点位的变化吧对吗？说了这么多，其实就是要实现map这个对象的共用的问题【这一步其实等价于把map这个对象存在data里面，然后要用的地方直接加this就可以了】 marker: [],这里写个空数组，然后通过this.marker.push(new BMapGL.Marker(new BMapGL.Point(v.lng, v.lat))); 把画出来的点位push到空数组里面去 lng: 103.549, //初始化经度 lat: 30.7921, //初始化纬度 company: [ { cid: "0", name: "四川省电力总公司", address: "成都市XX街XX号", lng: 103.92, lat: 30.79, }, { cid: "1", name: "成都市电力公司", address: "成都市XX街XX号", lng: 103.92, lat: 30.69, }, { cid: "2", name: "绵阳市电力公司", address: "绵阳市XX街XX号", lng: 103.82, lat: 30.59, }, { cid: "3", name: "自贡市电力公司", address: "自贡市XX街XX号", lng: 103.72, lat: 30.49, }, { cid: "4", name: "攀枝花市电力公司", address: "攀枝花市XX街XX号", lng: 103.62, lat: 30.39, }, ], }; }, methods: { myMap() { this.map = new BMapGL.Map("bdMap"); // 创建Map实例 this.map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 12); // 初始化地图,设置中心点坐标和地图级别 this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放这一步是师父教我的，我认为是最妙的一部分 //直接forEach循环遍历目标数组的每一个item 然后提前就把点位画好 this.company.forEach((v, i) => { //把5个点位提前画出来 this.marker.push(new BMapGL.Marker(new BMapGL.Point(v.lng, v.lat))); this.map.addOverlay(this.marker[i]);//百度地图API 画出mark点位这一步我还在研究中，我师父写的太精妙了，反正是用来让地图点位提示框通过 ——点击城市名—— 而自动显示的貌似这一部分还是引入了一个JS的文件然后才能调用 BMapLib.EventWrapper.addListener这个方法 BMapLib.EventWrapper.addListener(this.marker[i], "click", (e) => { console.log("click"); this.map.openInfoWindow(//百度地图API 实现打开信息窗口有两个参数第一个是InfoWindow配置项， //第二个是点位new BMapGL.Point(v.lng, v.lat) new BMapGL.InfoWindow("地址 :" + this.company[i].address, { width: 100, height: 50, title: this.company[i].name, }), new BMapGL.Point(v.lng, v.lat) ); // 开启信息窗口1 }); }); }, setNewCenter(i) { this.lng = this.company[i].lng; this.lat = this.company[i].lat; var point = new BMapGL.Point(this.lng, this.lat); this.map.setCenter(point); // 设置地图中心点 BMapLib.EventWrapper.trigger(this.marker[i], "click"); 这里不能画点，只能提前把点点在图上画出来不然传一个参数进去他就画一个点这样会造成点数重叠 }, }, 总结：

简单说，其实vue中用百度地图最基本的东西还是不难的，只是有很多的API需要去看去学习，难的地方还是在具体功能的实现上，就像今天遇到的bug一样，把我师父都坑了哈哈，就是因为重复画mark点，导致原来绑定了事件的mark点被覆盖了，结果就是不显示地图点位提示框，但是也不报错，哈哈哈，太不讲武德了吧。用这个其实跟Echarts差不多，无非就是绑定dom 然后加配置项，然后画出来，只不过方法不同而已

希望看了各位看官看了能有一定的收获吧，记得来个一键三连呗。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章