react 调用百度地图的坑

1.引入百度地图

我使用的antd pro 的框架进行的开发，所以只需要在src/pages/document.ejs加入以下代码即可

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=Imejyag6D5IPg4lOfu0LiDUWBGh2SNmc"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

2.调用前判断是否加载成功

 render(){
    let checkNet = false
    if( window.BMap){
      checkNet = true
    }
    return (
      <PageLayout>
        {checkNet?(  <MyMap ></MyMap>):(<a>网路连接中断"< /a>)}
      </PageLayout>
    )
  }

3.地图组件

import React, {Component} from 'react';




import styles from './index.less'
import {connect} from "dva";

@connect(({ apdistribution }) => ({apdistribution}))
class MyMap extends Component{
    constructor(props) {
        super(props);

      }

  componentDidMount() {
    this.renderChart();
    }


  componentDidUpdate(prevProps) {
    const update = this.compareProps(prevProps, this.props);
    /* 再优化 */
    if(update){
      this.reRenderChart(this.props)
    }
  }
  //   比较前后参数是否相同
  compareProps = (oldProps={}, newProps={}) =>{
    const oldPropsString = JSON.stringify(oldProps);
    const newPropsString = JSON.stringify(newProps);
    return ! (oldPropsString === newPropsString);
  };


  //   第二次渲染百度地图
  reRenderChart = props =>{
    const{apdistribution:{aps}} = this.props;
    this.makeMap(aps)
  };
  //   第一次渲染百度地图
  renderChart = () =>{
    const{apdistribution:{aps}} = this.props;
    this.makeMap(aps)
  };


    makeMap=(aps)=>{
      if(aps!== undefined) {
        const map = new BMap.Map("myMap");

        map.setMapType(BMAP_HYBRID_MAP)
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
              BMAP_HYBRID_MAP,
              BMAP_NORMAL_MAP,

            ]
          }
        ));
        const point = new BMap.Point(120.487295, 36.126442);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
       // 编写自定义函数,创建标注

        function addMarker(point,ap) {
          const marker = new BMap.Marker(point);
          map.addOverlay(marker);
          marker.addEventListener("click", function (e) {
            alert("您点击了标注"+ap.lys)
          })
        }
        for (let i = 0; i < aps.length; i++) {
         const jwd=aps[i].jwd.split(',');
         const point1 = new BMap.Point(parseFloat(jwd[0]),parseFloat(jwd[1]));
          addMarker(point1,aps[i]);
        }


    }
    }

  render(){

    const{apdistribution:{aps}} = this.props;
      console.log(aps);
    if(this.map){
      this.makeMap(aps);
    }

    return (
        <div className={styles.myPage}>
          <div id='myMap' className={styles.map}></div>

我的地图
        </div>
    )
  }
}
export default MyMap;