vue實現根據多選框按鈕，動態給百度地圖新增和刪除相應的覆蓋物

寂靜山林發表於2018-03-15
Vue地圖

1.定義物件陣列

cars:[ { indexName: 0, name:'登高車', state:false, icon:'static/img/mapMarker/car1.png', points:[ [116.316967,39.990748], [116.323938,39.989919], [116.31311,39.9890], [116.315,39.9890], ], }, { indexName:1, name:'高壓滅火劑', state: false, icon:'static/img/mapMarker/car2.png', points:[ [116.328896,39.988039], [116.321135,39.987072], ]

      },
      {
        indexName: 2,
        name:'高壓強磁堵漏裝置',
        state: false,
        icon:'static/img/mapMarker/car3.png',
        points:[
          [116.332453,39.989007],
          [116.324045,39.987984],
        ]
      },
      {
        indexName: 3,
        name:'排煙車',
        state: false,
        icon:'static/img/mapMarker/car4.png',
        points:[
          [116.322085,39.974316],
          [116.322108,39.986381]
        ]
      },
      {
        indexName:4,
        name:'泡沫車',
        state: false,
        icon:'static/img/mapMarker/car5.png',
        points:[
          [116.332508,39.982311],
          [116.332918,39.986386]
        ]
      },
      {
        indexName: 5,
        name:'氣動起重氣墊',
        state: false,
        icon:'static/img/mapMarker/car6.png',
        points:[
          [116.329258,39.958318],
          [116.329606,39.966381]
        ]
      },
      {
        indexName:6,
        name:'移動供氣源',
        state: false,
        icon:'static/img/mapMarker/car7.png',
        points:[
          [116.324208,39.988331],
          [116.324667,39.986383]
        ]
      },
      {
        indexName:7,
        name:'雲梯車',
        state: false,
        icon:'static/img/mapMarker/car8.png',
        points:[
          [116.320258,39.988371],
          [116.321618,39.986389]
        ]
      },
    ],
複製程式碼

2.data定義二維陣列myOverlays:[]; 3. mounted(){ this.$nextTick(function () { this.initMap(); }); },

4.methods(){ initMap(){ this.createMap() ; //建立地圖 }, createMap(){//建立地圖 let map = new BMap.Map("map");//在百度地圖容器中建立一個地圖 let point = new BMap.Point(116.323066,39.989956);//定義一箇中心點座標 map.centerAndZoom(point,16);//設定地圖的中心點和座標並將地圖顯示在地圖容器中 map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放 window.map = map;//將map變數儲存在全域性 }, addOverlays(n){//新增覆蓋物 let _th = this.cars; let array=this.myOverlays; array[n]={ label:[], Icon: new BMap.Icon(_th[n].icon, new BMap.Size(30, 30), {offset: new BMap.Size(10, 25),}), markers:[] }; for (let j = 0; j < _th[n].points.length; j++){ let point = new BMap.Point(_th[n].points[j][0], _th[n].points[j][1]); array[n].markers[j]=new BMap.Marker(point, { icon: array[n].Icon }); array[n].label[j] = new BMap.Label(_th[n].name, {offset: new BMap.Size(-5, 30)}); array[n].label[j].setStyle({ color: '#fff', fontSize: '10px', padding: '5px', background: 'rgba(0, 0, 0, .5)', border: '1px solid #fff', fontFamily: "微軟雅黑", borderRadius: '3px' }); array[n].markers[j].setLabel(array[n].label[j]); map.addOverlay(array[n].markers[j]); } }, clearOverlays(n){//刪除覆蓋物 let array=this.myOverlays; for (let i=0;i< array[n].markers.length;i++){ map.removeOverlay(array[n].markers[i]); } }, selectBox(car){//多選框按鈕操作 car.state = !car.state; let carType = car.indexName; if(car.state==true){ this.addOverlays(carType); }else { this.clearOverlays(carType); } } }

相關文章