[React] Baidu Maps API

Baidu map development documents: http://lbsyun.baidu.com/index.php?title=jspopular

Call Interface 

Baidu need to load a built-api file a request to use their own ak 

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

 

Because it is something external npm there is not that these api interfaces inside, in order to use

You are introduced each other to load the specified interfaces api   

Usually that is not encapsulated display position set id 

 

// Create a Map instance // initialize the map // add controls, mask, suspended pointing icon

 

 

 

 

 Learn skills that are pasted feelings

// Create a map to find the position of the object displayed in the box id 
    RenderMap = () => {
       this .map = new new window.BMap.Map ( 'BikeDetailMap' );
       this .map.enableScrollWheelZoom ( to true );      // open the mouse wheel zoom 
      this .addMapControl ();   // add controls 

    }

Create a map object

// add the default control map which may be added an operation of writing controls operated 
    addMapControl = () => { 
      the let Map = the this .map; 
      Map.addControl ( new new window.BMap.ScaleControl ({Anchor: window.BMAP_ANCHOR_TOP_RIGHT}) ); 
      Map.addControl ( new new   window.BMap.NavigationControl ({Anchor: window.BMAP_ANCHOR_TOP_RIGHT})); 

    }

Paste this add controls

// Draw region with 
    drawServiceList = (List) => { 
      the let ServerList = []; 
      list.forEach ((Item) => { 
          serverList.push ( new new window.BMap.Point (item.lon, item.lat)); 
      }) 

      // create a polygon 
      the let polygon = new new window.BMap.Polygon (ServerList, { 
        strokeColor is: "Blue", strokeWeight: 2, strokeOpacity: 0.6 
      }); 

      the this .map.addOverlay (polygon); 

    }

Add a control example (bicycle wait coordinates)

// add action 
        the this .map.addOverlay (startMarker);
         the this .map.addOverlay (endmarker);
         the this .map.addOverlay (poliLine);
         // open the center point of the map display initialization of 
        the this .map.centerAndZoom (endPoint, 11 ) ; 

    }

Add controls action