Google Maps API version 3rd providesOverlayView
Class.OverlayView
Is a base class that provides several methods you must implement when creating a stack. This class also provides some methods for converting between screen coordinates and map locations.
To create a custom stack layer, perform the following operations:
- Set
prototype
Setgoogle.maps.OverlayView()
. This effectively achieves "subclass" of stack layer classes ".
- Create a constructor for the custom stack layer and set all initialization parameters in the constructor as custom properties.
- Implementation in prototype
onAdd()
To attach the stack layer to the map. The system callsOverlayView.onAdd()
.
- Implementation in prototype
draw()
To process the visual display of objects. Similarly, after the object is displayed for the first time, the system will callOverlayView.draw()
.
- You should also implement
onRemove()
To clear all elements added in the stack layer.
HTML code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> overlayview </title>
<Link type = "text/CSS" rel = "stylesheet" href = "/style/mapmaker.css"/>
<SCRIPT type = "text/JavaScript" src = "</script'> http://maps.google.com/maps/api/js? Sensor = false & language = ZH-CN "> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "/JavaScript/overlayview. js"> </SCRIPT>
</Head>
<Body onload = "initialize ()">
<Div id = "show"> </div>
</Body>
</Html>
Overlayview. js
VaR overlay;
VaR geocoder;
Function initialize (){
Address = $ G ("Address ");
Name = $ G ("name ");
Geocoder = new Google. Maps. geocoder (); // instantiate Address Resolution
VaR mylatlng = new Google. Maps. latlng (30.658602, 104.064587); // initialize the coordinate center, which is listed in Chengdu.
VaR myoptions = {
Zoom: 15,
Center: mylatlng,
Maptypeid: Google. Maps. maptypeid. Roadmap // specify the map type
};
VaR map = new Google. Maps. Map (document. getelementbyid ("show"), myoptions );
Geocoder. geocode ({
'Address': Address
}, Function (results, status ){
If (status = Google. Maps. geocoderstatus. OK ){
Map. setcenter (results [0]. Geometry. Location); // locate the map center to the query result.
Overlay = new lablemarker (MAP, name, Results [0]. Geometry. Location); // instantiate the overlayview class
}
});
}
Function lablemarker (MAP, text, latlng ){
This. Map _ = map;
This. text _ = '<Div class = "iconthestyle"> <Div class = "S1"> </div> <Div class = "S2">' + TEXT + '</Div> <Div class = "S3"> </div> <Div class = "S4"> </div> <Div class = "S5"> </div> </Div> ';
This. latlng _ = latlng;
This. Div _ = NULL;
This. setmap (MAP );
}
// Inherit from Google. Maps. overlayview
Lablemarker. Prototype = new Google. Maps. overlayview ();
// Called when you are about to add the floating layer to the map
Lablemarker. Prototype. onadd = function (){
VaR DIV = Document. createelement ('div ');
Div. style. Border = 'none ';
Div. style. Position = 'absolute ';
Div. innerhtml = This. Text _;
This. Div _ = div;
VaR panes = This. getpanes ();
Panes. overlaylayer. appendchild (DIV );
};
// Called when the map is displayed for the first time
Lablemarker. Prototype. Draw = function (){
VaR overlayprojection = This. getprojection ();
VaR latlng = overlayprojection. fromlatlngtodivpixel (this. latlng _);
// Set the layer size and position
VaR DIV = This. Div _;
VaR size = new Google. Maps. Size (-26,-42); // modify the coordinate value;
Div. style. Left = (latlng. x + size. width) + 'px ';
Div. style. Top = (latlng. Y + size. Height) + 'px ';
};
// Setmap (null) of the floating layer is automatically called.
Lablemarker. Prototype. onremove = function (){
This. Div _. parentnode. removechild (this. Div _);
This. Div _ = NULL;
};
More 0
- Previous Google Maps javascript API V3 Control
- Next geolocation marker for Google Maps v3