[Baidu map API] a self-developed tool for obtaining regional longitude and latitude

Abstract: The previous chapter teaches you how to build your own administrative region map. This time, we will provide you with a visual selection of regions and the ability to automatically generate longitude and latitudeCode. ToolSource codeIt is completely open and detailed annotations are made. It can be used either as a tool or as a learning case for Baidu map API.

 

Tool description:

1. The switch can be controlled to determine whether to create a line covering on the map.

2. Double-click the map to create a polygon cover.

3. Automatically input latitude and longitude information,Do not copy the last line. Because of the dblclcik event of map, two clicks are triggered first, and finally dblclick.

4. The clear button can clear the covering, clear the longitude and latitude data, and try again.

 

 

 

 

 

 

All source code:

 <!  Doctype html  > 
<  Html  > 
 <  Head  > 
 <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charset = gb2312"   /> 
 <  Title  > Administrative Region tools </  Title  > 
 <  Script  Type  = "Text/JavaScript"  SRC  = "Http://api.map.baidu.com/api? V = 1.2"  > </  Script  > 
 </  Head  > 
<  Body  > 
 <  Div  Style  = "Width: 520px; Height: 340px; Border: 1px solid gray"  ID  = "Container"  > </  Div  > 
 <  P  > <  Input ID  = "Startbtn"  Type  = "Button"  Onclick  = "Starttool ();"  Value  = "Enable the point retrieval tool"   /> <  Input  Type  = "Button"  Onclick  = "Map. clearoverlays (); document. getelementbyid ('info'). innerhtml =''; points = [];"  Value = "Clear"   /> </  P  > 
 <  Div  ID  = "Info"  > </  Div  > 
 </  Body  > 
 </  Html > 
 <  Script  Type  = "Text/JavaScript"  >  
  VaR  Map  =   New  Bmap. Map (  " Container  "  );  //  Create a map instance  
  Map. centerandzoom (  "  Beijing  "  , 11  );  //  Initialize the map and set the coordinates of the center and the map level.  
  
  VaR  Key  =   1  ;  // Switch  
  VaR  Newpoint;  //  One longitude and latitude  
  VaR  Points  =  [];  // Array, with latitude and longitude information  
  VaR  Polyline  =   New  Bmap. polyline ();  //  Line covering  
  
 Function  Starttool (){  //  Function  
  If  (Key  =  1  ){
Document. getelementbyid (  " Startbtn  "  ). Style. Background  =   "  Green  "  ;
Document. getelementbyid (  "  Startbtn  " ). Style. Color  =   "  White  "  ;
Document. getelementbyid (  "  Startbtn  "  ). Value  =  "  Enabled  "  ;
Key  =  0  ;
}
  Else  {
Document. getelementbyid (  "  Startbtn "  ). Style. Background  =   "  Red  "  ;
Document. getelementbyid (  "  Startbtn  "  ). Value =   "  Off status  "  ;
Key  =  1  ;
}
}
Map. addeventlistener (  "  Click  " ,  Function  (E ){  //  Click map to form a line covering  
  Newpoint  =   New  Bmap. Point (E. Point. lng, E. Point. LAT );
  If (Key  =  0  ){
  //  If (points [points. Length]. lng = points [points. Length-1]. lng) {alert (111 );}  
  Points. Push (newpoint );  //  Add a vertex to the array.  
 Polyline. setpath (points );  //  Set the Dot Array of the line  
  Map. addoverlay (polyline );  //  Add a line to a map  
  Document. getelementbyid (  "  Info "  ). Innerhtml  + =   "  New bmap. Point (  "   +  E. Point. LNG  +   "  ,  "  +  E. Point. LAT  +   "  ), </BR>  "  ;  //  Latitude and longitude of the output Array  
  }
});
Map. addeventlistener ( "  Dblclick  "  ,  Function  (E ){  //  Double-click a map to form a polygon covering.  
  If  (Key  = 0  ){
Map. disabledoubleclickzoom ();  //  Close double-click zoom in  
  VaR  Polygon  =   New  Bmap. polygon (points );
Map. addoverlay (polygon );  // Add a line to a map  
  }
});
  </  Script  >