react中加载地图

Question

问题描述

在react总怎样引入外部的js文件

问题出现的环境背景及自己尝试过哪些方法

let isLoaded = true

        return new Promise(function (resolve, reject) {
            if (isLoaded) {
              window.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor'], () => {
                resolve(window.AMap)
              })
              return
            }                
            var script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = true
            script.src = 'http://webapi.amap.com/maps?v=1.4.3&key=key&callback=$$$maptcinit&plugin=AMap.MouseTool'
            // script.onload = resolve
            script.onerror = reject
            script.onload = function () {
              isLoaded = true
              resolve(window.AMap)
            }
            document.head.appendChild(script)
          })

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
export default class HistoryPath extends React.Component{

    constructor(){
        super();
        this.state={
            useType:'CONTAINER',
            visible: false,
            visibleOder:false,
        };
        
        this.loadUIs();
        this.amapEvents = {
            created: (mapInstance) => {
                   mapInstance.plugin('AMap.Geocoder', function() {
                        
                  })
              }
          };
          this.autoEvents = {
            created: (markerInstance) => {
                  mapInstance.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
                      var autoOptions = {
                          city: "北京市", //城市，默认全国
                          input: "tipinput" //使用联想输入的input的id
                      };
                      autocomplete = new AMap.Autocomplete(autoOptions);
                      var placeSearch = new AMap.PlaceSearch({
                          city: "北京市",
                      })
                      mapInstance.event.addListener(autocomplete, "select", function(e) {
                          //TODO 针对选中的poi实现自己的功能
                          placeSearch.setCity(e.poi.adcode);
                          placeSearch.search(e.poi.name)
                          console.log(e.poi)                            
                      });
                  });
            }
         }
    }
       
    loadUIs() {
          window.AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
          this.initPage(SimpleMarker);
        })
      }
    initPage(SimpleMarker) {
        const map = this.props.__map__;
        new SimpleMarker({
            //前景文字
            iconLabel: 'A',
            //图标主题
            iconTheme: 'default',
            //背景图标样式
            iconStyle: 'red',
            //...其他Marker选项...，不包括content
            map: map,
            position: [120, 31]
        });
        new SimpleMarker({
            //前景文字
            iconLabel: {
                innerHTML: '<i>B</i>', //设置文字内容
                style: {
                    color: '#fff' //设置文字颜色
                }
            },
            //图标主题
            iconTheme: 'fresh',
            //背景图标样式
            iconStyle: 'black',
            map: map,
            position: [120, 29]
        });
      }        

    show=(value)=>{        
        this.setState({
            useType:'CONTAINER0',
            visible:value?true:false,
            visibleOder:value?true:false,                
        })            
}
 
render(){
    let { useType } = this.state;
    const {listData}=this.props;
    const modalParams = {           
        width: 700,
        mask:false,
        style:{position:'absolute',right:40,top:160},
        visible: this.state.visible,
        footer: null,            
        destroyOnClose:true,
        keyboard:false,
        maskClosable:false,
        onCancel: () => this.setState({ visible: false }),
    };
    const plugins = [
        // 'MapType',
        // 'Scale',
        // 'OverView',//小地图
        // 'ControlBar', // v1.1.0 新增
        {
          name: 'ToolBar',
          options: {
            visible: false,  // 不设置该属性默认就是 true
            onCreated(ins){
              // console.log(ins);
            },
          },
        }
      ]

    return(
        <div>
            <Map amapkey={'89319725fb20f0a726eec92bd584df03'}  events={this.amapEvents} center={this.state.center} useAMapUI>
                <ZoomCtrl events={this.autoEvents} onCreate={this.show}/>                                    
            </Map>
            <Row>
                <OpenModal {...modalParams} >
                    <ViewDetails useType={useType}></ViewDetails>
                      <ElectronicWaybillDetails useType={useType} detailsData={ listData }></ElectronicWaybillDetails>
                </OpenModal>                    
            </Row>
        </div>
    )
}

}

你期待的结果是什么？实际看到的错误信息又是什么？

外部引入的js放在什么位置合适？

Answer 1

一般我是放在index.html里面