先看下效果图吧,一眼望去比较直观,也能知道是不是自己想要的效果
接下来就是开始开发的过程啦~~~
首先是 HTML(其实就是一个 div 搞定),具体的样式根据自己的情况画吧
<div class="map" id="map" ref="map"></div>
接下来是js 的相关操作啦~
1、安装依赖
npm install vue-baidu-map --save
2、在main.js文件中全局引入百度地图
也可以用 script 引入
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=你的ak"></script>
// 2.0版本
import BaiduMap from 'vue-baidu-map'
// 3.0 版本需要把node-modules下 vue-bai-map 的组件放到自定义的文件中再引入(如下图)
import BaiduMap from '@/components/baidu-map/components'
Vue.use(BaiduMap, { ak: '你已经申请的ak' });
3、创建地图实例(自定义样式需要使用到个性化地图:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom)
import mapStyle from './map_style' // 引入自定义样式文件
mounted() {
this.map = new BMapGL.Map('map', {
enableRotate: false
});
this.map.setMapStyleV2({ styleJson: mapStyle }); // 设置自定义样式
this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标
var marker = new BMapGL.Marker(point); // 创建标注
this.map.addOverlay(marker); // 将标注添加到地图中
},
methods:{
// 拿到后端返回的所有经纬度后存起来,后续做点的创建标记
calcLifeCircleLocation() {
this.border1 = []
let top = 0, bottom = 9999, left = 9999, right = 0
this.polygonList.forEach((point) => {
let longitude = Number(point.longitude);
let latitude = Number(point.latitude);
if (longitude < left) {
left = longitude
}
if (longitude > right) {
right = longitude
}
if (latitude > top) {
top = latitude
}
if (latitude < bottom) {
bottom = latitude
}
let northLat = this.northMove(latitude)
this.border1.push(new BMapGL.Point(longitude, latitude));
})
// 计算生活圈中心点
this.lifeCircleCenter.lon = (right - left) / 2 + left;
this.lifeCircleCenter.lat = (top - bottom) / 2 + bottom;
},
// 在地图上标记所有的经纬度的点
drawPoint() {
let map = this.map, arrayList = this.arrayList, _this = this
arrayList.forEach((item, index) => {
let itemObj = item
const bPoint = new BMapGL.Point(item.longitude, item.latitude); // 创建点
var myIcon = new BMapGL.Icon(this.findFacilityIcon(item.facilitiesId), new BMapGL.Size(24, 31), { anchor: new BMapGL.Size(12, 31) }); // 设置点图片
var iconImg = new BMapGL.Marker(bPoint, { icon: myIcon });
// 将标注添加到地图中
map.addOverlay(iconImg); // 在地图上显示icon图片
var html = ''
for (let i = 0; i < itemObj.extendList.length; i++) {
html += `<p style="white-space: normal;">${ itemObj.extendList[i].propertyName }:${ itemObj.extendList[i].propertyValue }</p>`;
}
var content = ` <div class="introduce" id="label-item${ index }">
<p class="label" style="white-space: normal;">${ itemObj.name }</p>
<div class="cont-extend" id="cont-extend">`
+ html + `<br/>` +
` </div>
<div class="btn">
<button >关闭</button>
</div>
</div>`;
var label = new BMapGL.Label(content, { // 创建文本标注
position: bPoint, // 设置标注的地理位置
offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
})
var style = {
backgroundColor: 'transparent',
width: '360px',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
padding: '19px 23px',
border: 0,
display: 'none'
}
map.addOverlay(label); // 设置标注框样式,有的样式主要配合css才能实现(例如背景图片)
label.setStyle(style);
iconImg.addEventListener('click', function () { // 创建点击事件
if (_this.prevLabel) {
_this.prevLabel.setStyle({
display: 'none'
})
}
label.setStyle({
display: 'block'
})
let btnClick = document.querySelector(`#label-item${ index } .btn button`)
// let imgClick = document.querySelector(`#label-item${ index } img`)
btnClick.onclick = () => {
label.setStyle({
display: 'none'
})
}
_this.prevLabel = label // 记录上一个标注点、在点击当前标注框的时候关闭上一个
})
})
},
}
注: 在切换选择器数据时需要清楚地图上的点再重新标记
this.map.clearOverlays();
// 彩蛋:切换tab时滚到对应的tab-item位置上的效果
document.querySelector('#points-item' + this.typeIndex).scrollIntoView({ block: 'center' });
/*// 去除百度地图水印*/
.anchorBL {
/*//在全局样式css中添加*/
display: none;
}
.BMap_cpyCtrl span {
display: none;
}
好了,大致就这样,有问题需要帮助的请留言~~