百度地图(初始化/编辑/添加/移除/定位)

componentDidMount() {
    this.myMap = new BMap.Map('map');
    let point = new BMap.Point(116.404, 39.915);
    this.myMap.centerAndZoom(point, 15);
    this.myGeo = new BMap.Geocoder();
    this.drawingManager = new BMapLib.DrawingManager(this.myMap, {
        isOpen: false,
        drawingType: BMAP_DRAWING_POLYGON,
        enableDrawingTool: false,
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 5),
            drawingModes: [BMAP_DRAWING_POLYGON]
        },
        polygonOptions: {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5},
    });
    const {drawingManager, ownOverlays, bindMenu} = this;
    drawingManager.addEventListener("overlaycomplete", function (e) {
        drawingManager.close();
        e.overlay.tempIndex = ownOverlays.length;
        e.overlay.enableEditing();
        bindMenu(e.overlay);
        ownOverlays.push(e.overlay);
    });
  }

  bindMenu = (currOverlay) => {
    const {removeArea} = this;
    let markerMenu = new BMap.ContextMenu();
    markerMenu.addItem(new BMap.MenuItem('删除', function (e) {
      console.log(e,currOverlay);
      removeArea(currOverlay);
    }));
    currOverlay.addContextMenu(markerMenu);
    // currOverlay.addEventListener("click", function () {
    //     console.log(this.tempIndex);
    // });
  }

  positioning = (e) => {
    const {validateFields, getFieldValue} = this.props.form;
    const {city_name} = this.props.business_public;
    const {myMap, myGeo} = this;
    const _address = getFieldValue('address');
    myGeo.getPoint(_address, function(point){
        if (point) {
              myMap.centerAndZoom(point, 16);
              myMap.addOverlay(new BMap.Marker(point));
          }else{
              alert("您选择地址没有解析到结果!");
          }
      }, city_name);
  }

  addArea = (e) => {
    const {drawingManager} = this;
    drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
    drawingManager.open();
  }

  removeArea = (currOverlay) => {
    const {ownOverlays, myMap} = this;
    const _index = currOverlay.tempIndex;
    ownOverlays.splice(_index,1);
    myMap.removeOverlay(currOverlay);
    ownOverlays.forEach( (item,index) => {
      console.log(item.tempIndex);
      item.tempIndex = index;
    });

  }

 

 覆盖物overlay的区域围栏属性是ia

 





 

posted @ 2016-09-08 16:05  深海懒猫  阅读(1547)  评论(0)    收藏  举报