【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);

    }

添加控件動做