百度地图(初始化/编辑/添加/移除/定位)
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