Google Maps V3 rectangular electronic barrier implementation

Many map positioning and so on require the electronic barrier function, which is also required by a positioning project recently. Google hasn't found any usefulCodeI had to write one for myself.

 

It's very simple.

 

<! Doctype html >  
< Html >  
< Head >  
< Meta Name = "Viewport" Content = "Initial-scale = 1.0, user-scalable = No"   />  
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" />  
< Title > Google Maps javascript API V3 example: marker simple </ Title >  
< Link Href = "Http://code.google.com/apis/maps/documentation/javascript/examples/default.css" REL = "Stylesheet" Type = "Text/CSS"   />  
< Script Type = "Text/JavaScript" SRC = "Http://maps.googleapis.com/maps/api/js? Sensor = false" > </ Script >  
< Script Type = "Text/JavaScript" >  
Function Initialize (){
VaR Mylatlng =   New Google. Maps. latlng ( 29.678815 , 121.426489 );
VaR Myoptions = {
Zoom: 12 ,
Center: mylatlng,
Maptypeid: Google. Maps. maptypeid. Roadmap
}
VaR Map =   New Google. Maps. Map (document. getelementbyid ( " Map_canvas " ), Myoptions );

VaR Marker =   New Google. Maps. Marker ({
Position: mylatlng,
Map: map,
Title: " Hello world! "
});

VaR Rectangle =   New Google. Maps. rectangle ();
VaR Rectoptions = {
Strokecolor: " # Ff0000 " ,
Strokeopacity: 0.8 ,
Strokeweight: 2 ,
Fillcolor: " # Ff0000 " ,
Fillopacity: 0.35 ,
Map: map,
Clickable: False ,
Bounds: map. getbounds ()
};

VaR Beginlatlng =   "" ; // Record start point coordinates
VaR Endlatlng =   "" ; // End Point Coordinate of record
VaR Rectbounds =   "" ;
VaR Sfclick =   "" ;
VaR Sfmove =   "" ;
VaR Clickcount =   0 ; // Clicks
Sfclick = Google. Maps. event. addlistener (map, ' Click ' , Function (E ){
VaR Begin = E. latlng;
Clickcount ++ ;
If (Clickcount =   1 ){
Sfmove = Google. Maps. event. addlistener (map, " Mousemove " , Function (E ){
Beginlatlng = Begin;
Endlatlng = E. latlng;
Rectoptions. Bounds =   New Google. Maps. latlngbounds (beginlatlng, endlatlng );
Rectoptions. Map = Map;
Rectangle. setoptions (rectoptions );
});
} Else {
Google. Maps. event. removelistener (sfmove );
If (Window. Confirm ( " Are you sure you want to set the electronic barrier range? " )){
Clickcount =   0 ;
Alert ( ' Starting coordinate point '   + Beginlatlng +   ' \ N ending coordinate point '   + Endlatlng)
} Else {
Clickcount =   0 ;
Rectoptions. Map =   Null ;
Rectangle. setoptions (rectoptions );
}
}
});
}
</ Script >  
</ Head >  
< Body Onload = "Initialize ()" >  
< Div ID = "Map_canvas" > </ Div >  
</ Body >

</Html>  

 

Http://www.cnblogs.com/relax/archive/2011/08/24/2151838.html

Note that the clickable of rectangle must be set to falsh, otherwise the rectangle will not end. It is best to include the source when you reprint it.