【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实例

// 初始化地图

//添加控件、遮罩、悬浮定点图标

学的是技巧   粘贴的是情怀

requestList= ()=>{
      axios.ajax({
        url:'/adminapi/map/bike_list',
        data:{
          params:{

          }
        }
      }).then((res)=>{
        let result = res.data.result;
        this.setState({
          list:result
        })

        let bike_list = result.bike_list;
        let route_list = result.route_list;
        let service_list = result.service_list;
        // 载入初始化
        this.renderMap();
        // 等待自行车的 位置坐标
        this.bikeGps(bike_list);
        // 可以监听服务区域  超出就不归我管了
        this.drawServiceList(service_list);
        // 自行车  服务,起点到终点的
        this.gpsGps(route_list);

      })
    }

conponentWillMount

// 创建地图 对象    找到显示的位置 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);

    }

添加控件动作