百度地图在VUE项目中插入点位及点位信息弹框
在项目中需要使用地图功能,效果图如下:
具体步骤如下:
1、申请百度地图密钥
2、安装vue-baidu-map
3、在main.js中引入vue-baidu-map.js
import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'ak值' });
4、template中使用
<baidu-map :zoom="zoom" class="baidu-map" :map-click="false" @ready="handler" > <bm-info-window :position="infoWindow.point" :title="infoWindow.title" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen" > </bm-info-window> </baidu-map> <!-- 地图弹框 --> <mapEchartsCompany v-show="companyShow" :companyData="companyData" @closeShow="closeShow" />
5、JS中使用
5.1、添加点位及设定地图和弹框属性:
<script> import map_off from "@/assets/img/map/map_off.png"; import map_on from "@/assets/img/map/map_on.png"; var mMap; // 地图容器 var mBMap; // 地图类 const markerLampblackMaps = new Map(); var labelIsShow = true; /** * 添加Marker */ var addMarker = function (point, item, fun) { var off = map_off var on = map_on var myIcon = new BMap.Icon(on, new BMap.Size(32, 32), { anchor: new BMap.Size(10, 25), }); if (item.status == '正常') { myIcon = new BMap.Icon(off, new BMap.Size(32, 32), { anchor: new BMap.Size(10, 25), }); } else { myIcon = new BMap.Icon(on, new BMap.Size(32, 32), { anchor: new BMap.Size(10, 25), }); } var marker = new mBMap.Marker(point, { icon: myIcon }); var label; if (item.name) { label = new mBMap.Label(item.name, { offset: new mBMap.Size(25, -10) }) } label.addEventListener('click', fun) if (labelIsShow) { marker.setLabel(label) } marker.addEventListener('click', fun) mMap.addOverlay(marker) return marker }; export default { components: { mapEchartsCompany }, // 弹框组件 data() { return { infoWindow: { point: { lng: '', lat: '' }, title: "", show: false, }, companyData: {}, // 弹框数据 companyShow: false }; }, </script>
5.2、引入地图的方法:
// 地图z主题 handler({ BMap, map }) { mBMap = BMap; mMap = map; map.centerAndZoom(new BMap.Point(106.757915842,31.8691891592), 5); map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 this.mapFindAllEnterpriseFun() },
5.3、数据循环并添加点位:
data.forEach(function(params) { const lng = parseFloat(params.longitude) const lat = parseFloat(params.latitude) if (!isNaN(lng) && !isNaN(lat)) { _this.center.lng = lng _this.center.lat = lat // eslint-disable-next-line no-undef const point = new BMap.Point(lng, lat) var marker = addMarker( point, params, function() { // 弹框传值 _this.companyData = params _this.infoWindowOpen() }, ) markerLampblackMaps.set(marker) } })
5.4、弹框isShow方法:
// 弹框打开关闭 infoWindowClose() { this.companyShow = false }, infoWindowOpen() { this.companyShow = true }, // 油烟弹框传值 closeShow(val) { this.companyShow = val }
数据弹框的代码就不贴了,该传得值传对,自己想做成什么样的都行
整理的有点啰嗦了,希望有帮助~~~