在使用react-amap框架,加载地图使用的方法是引入<Map />,在构造Map时,加入<Map evente属性:events={{ created: (el) => { this.mapEl = el; }, }} >
代码示例:
import { Map, Marker, } from 'react-amap' ;
export default Network extends PureComponent {
loadUI() {
window.AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
const _this = this;
// 1.创建一个实例
var districtExplorer = new DistrictExplorer({
eventSupport: true,
map: _this.mapEl
});
districtExplorer.loadMultiAreaNodes(adcodes, function(error, areaNodes) {
//注意节点的顺序,前面的高优先级
districtExplorer.setAreaNodesForLocating(areaNodes);
//清除已有的绘制内容
districtExplorer.clearFeaturePolygons();
for (var i = 0, len = areaNodes.length; i < len; i++) {
_this.renderAreaNode(districtExplorer, areaNodes[i]);
}
//更新地图视野
_this.mapEl.setFitView(districtExplorer.getAllFeaturePolygons());
});
})
}
render(){
<Map
amapkey={mapKey}
mapStyle='amap://styles/light'
center={this.state.position}
events={{
created: (el) => {
this.mapEl = el;
this.loadUI();
},
}}
/>
}
)
网友评论