【React】 百度地图API

百度地图 开发文档 ：http://lbsyun.baidu.com/index.php?title=jspopular

调用接口 

需要 内置加载一个 百度api文件    使用自己的ak  申请一个 

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=********************"></script>

因为呢有些东西 是外置的  npm里面是没有 那么这些api接口里面，要想使用

你就的去加载引入对方指定的 api接口   

一般没有封装那就是 设置id显示位置 

// 创建Map实例 // 初始化地图 //添加控件、遮罩、悬浮定点图标

 学的是技巧   粘贴的是情怀

// 创建地图 对象    找到显示的位置 id盒子
    renderMap= ()=>{
      this.map = new window.BMap.Map('BikeDetailMap');
      this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      this.addMapControl();  //添加控件

    }

创建map对象

// 添加地图控件  默认操作  写入这可就可以添加控件操作了
    addMapControl = ()=>{
      let map = this.map;
      map.addControl(new window.BMap.ScaleControl({ anchor:window.BMAP_ANCHOR_TOP_RIGHT}));
      map.addControl(new  window.BMap.NavigationControl({ anchor:window.BMAP_ANCHOR_TOP_RIGHT }));

    }

添加控件 粘贴这个

// 绘制行驶区域
    drawServiceList = (list)=>{
      let serverList = [];
      list.forEach((item)=>{
          serverList.push(new window.BMap.Point(item.lon,item.lat));
      })

      // 创建多边形
      let polygon = new window.BMap.Polygon(serverList, {
        strokeColor:"blue", strokeWeight:2, strokeOpacity:0.6
      });

      this.map.addOverlay(polygon);

    }

添加控件举例（自行车等待坐标）

// 添加   动作
        this.map.addOverlay(startMarker);
        this.map.addOverlay(endMarker);
        this.map.addOverlay(poliLine);
        // 打开初始化地图   显示的中心点
        this.map.centerAndZoom(endPoint,11);

    }

添加控件动作