1初始化
初始化地图，设置中心点，缩放比例，地图类型等
2 区域地图 相关的说明看上一篇文章
3 地图标注设置
每个图标可以对应设置大小和图片，经纬度。
代码如下：
mapcommon.js
let myMap = { init: function(id, point, zoom, enableScrollWheelZoom, mapType) { let map = new BMap.Map(id, { enableMapClick: false }); map.centerAndZoom(new BMap.Point(point.longitude, point.latitude), zoom); map.enableScrollWheelZoom(enableScrollWheelZoom || true); map.setMapType(mapType || BMAP_HYBRID_MAP); return map; }, setBoundary: function(map, city, outlineColor, areaColor) { let bdary = new BMap.Boundary(); bdary.get(city, function(rs) { let list = rs.boundaries; let max = list[0]; for (let i = 1; i < list.length; i++) { if (list[i].length > max.length) { max = list[i]; } } let strs = max.split(";"); let fillColor = areaColor || "#163336"; let ENWS = ""; for (let i = 0; i < strs.length; i++) { ENWS += strs[i] + ";"; } //2.自定义外围边框点的集合 let E_JW = "170.672126, 39.623555;"; //东 let EN_JW = "170.672126, 81.291804;"; //东北角 let N_JW = "105.913641, 81.291804;"; //北 let NW_JW = "-169.604276, 81.291804;"; //西北角 let W_JW = "-169.604276, 38.244136;"; //西 let WS_JW = "-169.604276, -68.045308;"; //西南角 let S_JW = "114.15563, -68.045308;"; //南 let SE_JW = "170.672126, -68.045308 ;"; //东南角 //3.添加环形遮罩层 let ply1 = new BMap.Polygon( ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, { strokeColor: "none", strokeOpacity: 0.2, fillColor, fillOpacity: "0.6" } ); let strokeColor = outlineColor || "#00fdbb"; // 轮廓线 map.addOverlay(ply1); let ply = new BMap.Polygon(max, { strokeWeight: 2, strokeColor, fillColor: "" }); map.addOverlay(ply); // map.setViewport(ply.getPath()) //调整视野 }); }, //地图添加标注 addMarkersToMap: function(map, mapData) { let MarkerList = []; for (let i = 0; i < mapData.length; i++) { let Point = new BMap.Point(mapData[i].longitude, mapData[i].latitude); let icon = new BMap.Icon( mapData[i].iconData.icon, new BMap.Size(mapData[i].iconData.size[0], mapData[i].iconData.size[1]) ); // 创建标注 let Marker = new BMap.Marker(Point, { icon }); // 将标注添加到地图中 map.addOverlay(Marker); MarkerList.push(Marker); } return MarkerList; }, // 地图缩放 setZoom(map, zoom, longitude, latitude) { map.centerAndZoom(new BMap.Point(longitude, latitude), zoom); return zoom; }};export { myMap };
bMap.vue
<template> <div class="FarmMap"> <div id="map_container" ref="allmap"></div> <div class="control-box"> <div class="item" @click="setZoom(zoom-1)"> <div class="icon"></div> </div> <div class="item" @click="setZoom(zoom+1)"> <div class="icon"></div> </div> <div class="item" @click="setZoom(initzoom)"> <div class="icon"></div> </div> </div> </div></template>
