美文网首页
react-amap中获取map实例运用map.setFitVi

react-amap中获取map实例运用map.setFitVi

作者: 小红猪大鼻孔 | 来源:发表于2020-03-02 13:41 被阅读0次

    在使用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();
               },
            }}
        />
      }
    )
    

    相关文章

      网友评论

          本文标题:react-amap中获取map实例运用map.setFitVi

          本文链接:https://www.haomeiwen.com/subject/ohdpkhtx.html