众所周知百度地图只有区级边界覆盖物数据,因为项目需要街道级的地图边界展示,所以需要自己引入街道数据。
引入
在index.html中直接引入
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
在main.js 中将百度组件注入到Vue的原型里
Vue.prototype.BMapGL = window.BMapGL
正文
//街道JSON数据=格式[{"lng": 121.62442102480463, "lat": 30.014421231162792},{...}] import Jd_zs from '../assets/json/ZhuangShi.json' import Jd_gs from '../assets/json/GuiSi.json' import addicon1 from '../assets/img/add.svg'//自定义点标注的图片 data() { return { staticLocation: [121.60304, 29.970944], JieDaoJson: [//覆盖物数据 { name: '庄市街道',//名字 site: [121.633417, 29.941699],//坐标中心点 value: Jd_zs,//街道对应json数据 opacity: 0.7,//对应覆盖物透明度 }, { name: '贵驷街道', site: [121.624393, 29.985423], value: Jd_gs, opacity: 0.5, }, //此处省略其他街道数据 ], } }, mounted() { this.initBmap()//初始化地图 this.initPoint()//批量创建点 this.funStreet()//批量创建覆盖物 }, methods: { //初始化地图 initBmap() { const that = this const pt = this.staticLocation this.map = new this.BMapGL.Map('allmap') this.map.centerAndZoom(new this.BMapGL.Point(pt[0], pt[1]), 10) this.map.enableScrollWheelZoom(true) }, //批量创建点 initPoint() { const that = this this.pointArr.forEach(function (v) { createPoint(that, v, addicon1) }) //创建点 function createPoint(that, data, addicon) { // 创建图标 var myIcon = new that.BMapGL.Icon(addicon, new that.BMapGL.Size(32, 32)) // 创建Marker标注,使用图标 var pt = new that.BMapGL.Point(data.site[0], data.site[1]) that.marker = new that.BMapGL.Marker(pt, { icon: myIcon, }) // 设置标签 内容 偏移量 const label = new that.BMapGL.Label(data.title, { offset: new that.BMapGL.Size(10, -10), }) // 标签样式 label.setStyle({ border: 'none', borderRadius: '3px', background: 'rgba(33, 224, 255,0.6)', transform: 'translate(0%,0)', fontSize: '14px', padding: '0 3px', color: '#fff', }) // 设置标签 that.marker.setLabel(label) // 将标注添加到地图 that.map.addOverlay(that.marker) } }, // 添加街道覆盖物 funStreet() { const that = this this.JieDaoJson.forEach((v) => { // 层 let Str = [] v.value.forEach((k) => { Str.push(new this.BMapGL.Point(k.lng, k.lat)) }) var myPolygon = new this.BMapGL.Polygon(Str, { fillColor: '#428ffc', fillOpacity: v.opacity, trokeColor: '#fff', }) myPolygon.disableMassClear()//禁止被清楚 // 字 var textLabel = new this.BMapGL.Label(v.name, { offset: new this.BMapGL.Size(-30, 0), position: new this.BMapGL.Point(v.site[0], v.site[1]), enableMassClear: false,//禁止被清楚 }) textLabel.setStyle({ color: '#fff', background: 'rgba(0,0,0,0.2)', border: 'none', padding: '3px 5px', borderRadius: '3px', fontSize: '22px', }) this.ls4 = setTimeout(() => { that.map.addOverlay(myPolygon) that.map.addOverlay(textLabel) }, 100) }) }, }