Google map API interface sorting

Google map API interface sorting

I. Basic Knowledge:

1. The first step to use Google map APIS is to register an API key. Pay attention to the following two points:

1. If the page using the API has not been released, it is only for local debugging. You can use a string instead of a key.

2. the API key is only valid for the website directory or domain. For webpages in different domains, you need to use these domains to register different keys.

2. Page reference Javascript file <SCRIPT src = "http://ditu.google.com/maps? File = API & HL = ZH-CN & V = 2 & Key = abcdefg "type =" text/JavaScript "> </SCRIPT>

URL (http://ditu.google.com/maps? File = API & HL = ZH-CN & V = 2 & Key = abcdefg) Resolution:

1.ditu.google.com: You can also use ditu.google.cn. If you need to display a detailed map outside mainland China, you can use maps.google.com.

2. File = API: This is used to request the API's JS file. It is in a fixed format.

3. HL = ZH-CN

This is used to set the language version of the text to be displayed on the map, except for the map image, such as the control name, copyright notice, and usage prompt, if this parameter is not specified, the API default value is used. For itu.google.com, the default value is simplified Chinese Language (aps.google.com.

4. V = 2

This is used to specify the version number of the API class library to be imported. There are four setting methods:

V = 2.s stable version, the slowest update, but the most reliable;

V = 2 the current version (only the main version number is used). The update speed and reliability are between S and X.

V = 2.x latest version, which is the fastest updated, including the latest features, and may not have the reliability of the current version;

V = 2.76 specifies the specific version. It is not recommended.

Note: currently, the main version number of Google map API is 2. When the API is upgraded, the old version can only be used for one month. Therefore, you must change the main version number in time, if the version number is changed, relevant information will be published in the Google Code and Maps API discussion groups.

5. Key = abcdefg: Set the API key you registered.

Ii. core category:

Google map APIs mainly include: gmap2, gmarker, gmarkeroptions, gpolyline, and glatlng) gevent, gpoint, gsize, interface, gmaptype, and gicon), Form class (ginfowindow), form option class ginfowindowoptions), interface goverlay, enumeration gmappane, etc.

Note: Both the flag and line are map covers.

1. gmap2: Map class. A map is instantiated below:

VaR map = new gmap2 (container: dom_div, opts: options );

The constructor parameters are as follows:

Parameter required value type definition

Container is a dom_div Dom element and a div

Opts Optional options constructor options

Gmap2 includes the following methods:

1. How to set the status:

Enabledragging (): sets the map to be dragged.

Disabledragging (): Do not drag a map.

Draggingenabled (): returns the Boolean value of whether the map can be dragged. If you can drag it, "true" is returned; otherwise, "false" is returned ".

Enableinfowindow (): the map information window is displayed.

Disableinfowindow (): The disallow map information window is displayed.

Infographic wenabled (): returns the Boolean value displayed in the Map Information Window. If it is displayed, "true" is returned; otherwise, "false" is returned ". This method is usually used for testing.

Enabledoubleclickzoom (): You can double-click to zoom in the map, double-click to zoom in, right-click to zoom out (default ).

Disabledoubleclickzoom (): Double-click Zoom is prohibited. By default, double-click Zoom is disabled on Google Earth.

Doubleclickzoomenabled (): returns whether the map can be scaled by double-clicking a Boolean value. If you can double-click zoom, return "true ";

Enablecontinuouszoom (): sets the continuous and smooth scaling of the map.

Disablecontinuouszoom (): Disable continuous smooth scaling of the map.

Continuouszoomenabled (): returns a Boolean value indicating whether the map can be scaled smoothly. If continuous and smooth scaling is possible, "true" is returned; otherwise, "false" is returned ".

Enablescrollwheelzoom (): sets the zoom of a map to be controlled by the mouse wheel.

Disablescrollsheelzoom (): Disable the mouse wheel to control map scaling.

Scrollwheelzoomenabled (): determines whether the zoom of the returned map can be controlled by the scroll wheel. If you can zoom in and out with the scroll wheel, "true" is returned; otherwise, "false" is returned ".

Isloaded () returns a Boolean value of the type. If the map has been initialized by setcenter (), true is returned.

2. How to get the map data information:

Getcenter () returns the map coordinate of the map center of the glatlng type.

Getbounds () return type glatlngbounds returns the geographical coordinates of the rectangular area within the map's viewport range.

Getboundszoomlevel (bounds) returns the type number to display the most suitable map zoom level required for the specified region. this zoom level is calculated based on the current map type. If the map type is not specified, the first item in the map type array is used.

Getsize () return type gsize returns the pixel size of the map view.

Getzoom () returns a number and returns the current zoom level.

Getcontainer (): The container for obtaining the map

Getcurrentmaptype () to get the current map type. Note that the gmaptype object of the map type is obtained, instead of the Object Name.

3. Set the map:

Setcenter (center, zoom ?, Type ?) Switch the map view to the specified center point. You can also set an optional map zoom level and map type. The map type must have been added to the map.

Addmaptype () This method must be executed immediately after the map instance is constructed and the map state is initialized. If you call other map methods when the map is just constructed, an error will occur.

Panto (center) sets the center point of the map to the specified coordinate. If the point is already in the current viewport, the map center slides to this position.

The specified pixel distance for a panby (distance) map to slide.

Pandirection (dx, Dy) slides the distance of half of the map width in the specified direction. + 1 indicates the right and bottom, and-1 indicates the left and top.

Setzoom (level) sets the zoom level of the map to the given value.

Zoomin () scale down a map (increase the zoom level by 1 ).

Zoomout () zoom in the map (reduce the zoom level of the map by 1 ).

Saveposition () saves the current position and zoom level of the map for future use of the returntosavedposition () method to return to the current view.

Returntosavedposition () is returned to the map view saved through saveposition () last time.

Checkresize () checks whether the map container size has changed. This method is called when the map container Dom size may change so that the map can be automatically adjusted.

Setmaptype (gmaptype): Set map type: There are three types: g_normal_map, g_satellite_map, g_physical_map,

Removemaptype (gmaptype) deletes a map type from the current map.

Enablegooglebar (): Set the search bar on the map

 

4. Methods for map covering:

Addoverlay (overlay) adds an addoverlay event to the map and triggers the map.

Removeoverlay (overlay) deletes the specified Annotation on the map. If the annotation is indeed on the map.

Clearoverlays () deletes tags on all maps.

 

5. Methods for information floating windows:

Openinfowindow (point, node, opts ?) Open a simple information floating window at a specified geographic point. Slide the map to ensure that the Opened Information floating window is visible. The content of the information floating window is given as a DOM node.

Openinfowindowhtml (point, HTML, opts ?) Open a simple information floating window at a specified geographic point. Slide the map to ensure that the Opened Information floating window is visible. The content of the information floating window is given as HTML text.

Openinfoworkflow wtabs (point, tabs, opts ?) Open a tag-based information floating window at a specified geographic point. Slide the map to ensure that the Opened Information floating window is visible. The content of the information floating window is given as a DOM node.

Openinfowindowtabshtml (point, tabs, opts ?) Open a tag-based information floating window at a specified geographic point. Slide the map to ensure that the Opened Information floating window is visible. The content of the information floating window is given as HTML text.

Showmapblowup (point, opts ?) Opens a floating window showing the information of a view closer to a specified point at a specified geographic point.

Closeinfowindow () closes the currently opened information floating window.

Getinfowindow () return type ginfowindow return map information floating window object. if no information floating window exists, create an information floating window without displaying it. this operation is not affected by enableinfowindow.

6. Control Method:

Addcontrol (gcontrol) adds a Google Map Control

Removecontrol (gcontrol) deletes a Google Map control.

7. Example:

VaR map = new MAP2 (document. getelementbyidx_x ("map"), {size: gsize (200,200), backgroundcolor: "# ff0000 "});

Map. addcontrol (New gsmallmapcontrol (); // Add a zoom button control on the left of the map

Map. addcontrol (New gmaptypecontrol (); // Add map type controls including common maps, satellite maps, and hybrid maps

Map. setcenter (New glatlng (37.4419,-122.1419), 13); // instantiate a longitude and latitude instance with a dimension of 37.4419 and a longitude of-122.1419, and then set the center of the map. Map zoom value: 13

 

// Add 10 markers in random locations on the map

VaR bounds = map. getbounds (); // obtain the boundary value around the map.

VaR southwest = bounds. getsouthwest (); // the longitude and latitude of the Southwest China.

VaR northeast = bounds. getnortheast (); // longitude and latitude of Northeast China

VaR lngspan = northeast. LNG ()-southwest. LNG (); // longitude difference

VaR latspan = northeast. LAT ()-southwest. LAT (); // dimension difference

// Instantiate a latitude and longitude in the current map

VaR point = new glatlng (southwest. LAT () + latspan * Math. Random (),

Southwest. LNG () + lngspan * Math. Random ());

VaR marker = new gmarker (point); // instantiate a punctuation

 

// Click the punctuation. An information window is displayed when the punctuation is clicked.

Gevent. addlistener (Marker, "click", function (){

Marker. openinfowindowhtml ("<B> Hello </B> ");

});

Map. addoverlay (Marker); // Add punctuation to the map covering

2. gmapoptions class:

This type contains the following four attributes:

1. Size

By default, the size of the map you create is the size of the map container you specify. Therefore, generally, you need to explicitly declare the width and height attributes of your map container, otherwise, the map cannot be displayed normally. However, with the optional attribute "size", you will have another option. You can use the size attribute to specify the map size when creating a map, instead of waiting for the map container, even if the map container has defined the size of width and height. Of course, the value corresponding to the size attribute is a gsize data type. For example, if you specify Options = {size: gsize (400,300, the size of the map you created is a rectangle block of 400x300, regardless of the container size you specified.

 

2. maptype

After creating a map, the default map type is normal. To add other types of maps, such as satellite maps and terrain maps, you can use the gmap2.setmaptype () method, however, this will often list a bunch of setmaptypes. Gmapoptions provides the maptypes option. Multiple supported types can be added to the map through an array, such as {maptypes: [g_normal_map, g_satellite_map, g_physical_map]}.

Your map has three types: Common, satellite, and terrain. The first item in the maptypes array is the default map loading type. Therefore, if you want to load a satellite map by default, move g_satellite_map to the first item in the array.

 

3. draggablecursor and draggingcursor

These two options are used to define your cursor type on the map. The introduction that I put them together does not mean they must be used together. You can use either of them. Draggablecursor is the cursor in the drag-and-drop state of a map (by default, it can be dragged), while draggingcursor is the cursor when the map is dragged, the corresponding value is the same as the value used when you set other optical labels in Javascript. For example,

{Draggablecursor: "crosshair", draggingcursor: "move "}. Of course, you can also add your own icon in URL format

4. backgroundcolor

Before the map block image is transmitted, the display area of the map is dimmed by default. This is where backgroundcolor can be used, you can change the gray color to any other W3C-compliant color.

5. googlebaroptions

This is related to your use of gmap2.enablegooglebar () on the map. It specifies some default attributes when you add googlebar.

Example:

VaR Options = {size: gsize (400,300), backgroundcolor: "# ff0000 "};

VaR map = new gmap2 (document. getelementbyidx_x ("mapcontainer"), options );

 

3. gmarker class

Constructor:

1. gmarker (point, Icon ?, Inert ?) Use the specified icon or g_default_icon at the specified position to create a tag. If the inert parameter is true, the tag cannot be clicked and there is no parameter (not supported by version 2.50)

2. gmarker (point, opts ?) Use the specified option gmarkeroptions to create a tag at the specified point. The default tag can be clicked and the default icon g_default_icon is used. (supported from 2.50)

Gmarker includes the following methods:

1. openinfowindow (content, opts ?) Open the map information window above the markup icon. The content of the Information Window is a DOM node. Only applicable to the ginfowindowoptions. maxwidth option.

2. openinfowindowhtml (content, opts ?) Open the map information window above the markup icon. The content in the information window is displayed as a string containing HTML text. Applicable only to ginfowindowoptions. maxwidth

 

.

3. If getIcon () gicon is set by the constructor, the icon of this flag is returned.

4. If the gettitle () string is set by the constructor through the gmarkeroptions. Title attribute, the title of the mark is returned. If no title is input, "undefined (undefined)" is returned (starting from 2.85)

5. If getpoint () glatlng is set by the constructor or setpoint (), the geolocation indicated by this marker is returned. (Not recommended since 2.88)

6. If getlatlng () glatlng is set by the constructor or setlatlng (), the geolocation indicated by this marker is returned. (Since 2.88)

7. setpoint (point) None sets the geographic coordinates of the point to which this tag is anchored. (Not recommended since 2.88)

8. setlatlng (point) None sets the geographic coordinates of the point to which this tag is anchored. (Since 2.88)

9. enabledragging () None allows drag and drop tags on the map. For a function, you must have used gmarkeroptions. draggable = true to initialize the flag.

10. disabledragging () None: Do not drag tags on a map.

11. draggable () Boolean if you have used gmarkeroptions. draggable = true to initialize the flag through the constructor, true is returned. Otherwise, false is returned.

12. draggingenabled () Boolean returns true if the user is currently allowed to drag and drop tags in the map.

13. setimage (URL) None request to set the image specified by the URL to the foreground image marked for this. Note: print images and shadow images are not adjusted. Therefore, this method is mainly used to achieve the highlighted or dimmed display effect, rather than completely changing the logo appearance. (Since 2.75)

15. Hide () None if the current tag is visible, the tag is hidden. Note: If the current tag is visible, this function triggers the gmarker. visibilitychanged event. (Since 2.77)

16. Show () None: if the current tag is invisible, the tag is displayed. Note: If the current tag is invisible, this function triggers the gmarker. visibilitychanged event. (Since 2.77)

17. ishidden () Boolean returns true if the current tag is invisible. Otherwise, false is returned. (Since 2.77)

 

 

Example:

1.

VaR point = new glatlng (pointx, pointy );

VaR icon = new gicon ();

Icon. Image = "http://labs.google.com/ridefinder/images/mm_20_red.png ";

VaR mymarker = new gmarker (point, icon );

Alert (mymarker. getIcon (). Image );

2.

VaR point = new glatlng (pointx, pointy );

VaR mymarker = new gmarker (point, {draggable: true}); // drag-and-drop mark

Alert (mymarker. getpoint ());

4. gpolyline class

Constructor

Gpolyline (latlngs, color ?, Weight ?, Opacity ?, Opts ?) Create a line based on the vertex array. Color is a string that contains hexadecimal numbers and HTML-style colors, that is, # rrggbb. Weight is the line width in pixels. Opacity is a number ranging from 0 to 1. This line is non-sawtooth and translucent.

Methods contained in gpolyline

1. getvertexcount () number returns the number of vertices in the line. (Since 2.46)

2. getvertex (INDEX) glatlng returns the vertex corresponding to the given index value in the line. (Since 2.46)

3. getlength () number returns the line length (expressed in meters) along the Earth's surface ). (Since 2.85)

4. getbounds () glatlngbounds returns the boundary of this line. (Since 2.85)

5. Hide () None hide this line if the current line is visible and gpolyline. supportshide () returns true. Note: If the current line is visible, this function triggers the gpolyline. visibilitychanged event (since 2.87)

6. ishidden () Boolean returns true if the current line is invisible. Otherwise, false is returned. (Since 2.87)

7. Show () None this line is displayed if the current line is invisible. Note: If the current line is invisible, this function triggers the gpolyline. visibilitychanged event. (Since 2.87)

8. supportshide () Boolean if gpolyline. Hide () of the gpolyline object is supported in the current environment, true is returned. Otherwise, false is returned. (Since 2.87)

Note: If you want to display a line in the map, you need to include the VML namespace and some CSS code in your XHTML document so that they can work normally under IE. The beginning of the xhtm document looks like this

 

Example:

 

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml" xmlns: V = "urn: Schemas-Microsoft-com: VML">

<Head>

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>

<Title> my Google Maps hack </title>

<Style type = "text/CSS"> V/: * {behavior: URL (# default # VML );}

</Style>

<SCRIPT src = "http://maps.google.com/maps? File = API & V = 2 & Key = abcdefg "type =" text/JavaScript "> </SCRIPT>

</Head>

5. glatlng

Constructor:

Glatlng (Lat, LNG, unbounded ?) Pay attention to the order of latitude and longitude. If Unbounded is marked as true, it indicates that the number is used in the original input state. Otherwise, the latitude is between-90 degrees and + 90 degrees, however, the longitude repeats between-180 degrees and + 180 degrees.

Glatlng includes the following methods:

LAT () number returns the latitude coordinate in degrees (a value between-90 and + 90 ). If the unbounded mark is set in the constructor, the latitude coordinate value may be out of this range.

LNG () number returns the longitude coordinate in degrees (-a value between 180 and + 180 ). If the unbounded mark is set in the constructor, the longitude coordinate value may be out of this range.

6. gpoint class

Gpoint is a point on a map in pixel coordinates. Note: In V2, it is no longer a point on the ground expressed by geographical coordinates. Currently, geographic coordinates can be expressed by glatlng.

In the map coordinate system, the X coordinate increases to the right, and the Y coordinate increases downward.

Note: gpoint parameters are accessible like the X and Y attributes, but it is best not to modify them, but to use different parameters when creating a new object.

7. gevent namespace

This namespace contains functions that can be used to register an event handler (both processing custom events and DOM events) and trigger custom events. All events defined by this API are custom events triggered internally by gevent. Trigger.

Addlistener (source, event, Handler) returns geventlistener as the custom event registration event handler for the source object. Returns a handle that can be used to unregister the handler. When an event is triggered, this is set as the source object and the event handler is called.

Adddomlistener (source, event, Handler) returns geventlistener as the DOM event registration event handler for the source object. The source object must be a DOM node. Returns

 

Handle. When an event is triggered, this is set as the source object and the event handler is called. This function uses the DOM method in the current browser to register the event handler.

Removelistener (handle) deletes the handler installed with addlistener () or adddomlistener.

Clearlisteners (source, event) deletes all handlers installed on a given object using addlistener () or adddomlistener.

Clearinstancelisteners (source) deletes all handlers installed on a given object using addlistener () or adddomlistener () for all events.

Trigger (source, event,...) enables the source object to trigger a custom event. Input all the remaining optional parameters after the event to the event handler as parameters.

BIND (source, event, object, method) returns geventlistener. It registers the method call of the given object as a handler for the Custom Event of the source object. Returns a handle that can be used to unregister the handler.

Binddom (source, event, object, method) returns geventlistener to register the method call of the given object as a handler for the Custom Event of the source object. Returns a handle that can be used to unregister the handler.

Callback (object, method) function returns the closure of the method called on the object.

Callbackargs (object, method,...) function returns the closure that calls method on the object. When the returned function is called, all the remaining optional parameters following method are input as parameters in sequence.

8. gclientgeocoder address parsing class:

This class is used to establish direct communication with the Google server to obtain the geographical location information of the user's specified address. In addition, the geographic parser can maintain its own address cache, and can answer duplicate queries without having to communicate with the server. Note: currently, the China Map address parser only supports city/county/district-level addresses.

Getlatlng (address, callback) sends a request to the Google server to parse the specified address. If the address has been located, use glatlng to call the callback function specified by the user. Otherwise, a null point is provided to the callback function. If the address is not clear, only the most matched vertex is passed to the callback function. (Since 2.55)

Getlocations (address, callback) sends a request to the Google server to parse the specified address. A response containing the status code. If the response is successful, one or more placemark objects are passed to the callback function specified by the user. Unlike the gclientgeocoder. getlatlng method, the callback function can check the code value of the Status field to determine the cause of failure. (Since 2.55)

Example:

VaR map = new gmap2 (document. getelementbyidx_x ("map "));

VaR geocoder = new gclientgeocoder ();

VaR address = "wudaokou ";

Geocoder. getlatlng (address, function (point ){

If (! Point)

{

Alert (address + "not found ");

}

Else

{

Map. setcenter (point, 13 );

VaR marker = new gmarker (point );

Map. addoverlay (Marker );

Marker. openinfowindowhtml (Address );

Alert (point );

}

});

3. The following are the built-in controls of Google API.

Glargemapcontrol: zoom in and out Regulator

Gmaptypecontrol: switching between map and satellite images

Gsmallmapcontrol: The lite version of glargemapcontrol, which removes the zooming lever and retains the zoom button.

Gsmallzoomcontrol: only the scaling button is included. All other controls in glargemapcontrol are removed.

Gscalecontrol: Scale Control

 

Iv. reduce browser memory leakage

Google Maps API encourages the use of closures/closures. The second version of Maps API introduces a gunload () function to eliminate loop references that may cause memory leaks to the maximum extent. You should call

 

Use the gunload () function to reduce the risk of Memory leakage in your application: <body onUnload = "gunload () "> this function can eliminate the memory leakage of Google Maps in Internet Explorer.

 

Memory consumption problems, you should still use tools such as drip to test your website's memory leakage.

 

 

V. browser compatibility

Google Maps API supports the same browser type as Google Maps. Because different applications need to behave differently when encountering incompatible browsers, the Maps API provides a global method (gbrowseriscompatible () to check compatibility. However, when an incompatible browser is found, it does not take any action automatically. Http://maps.google.com/maps? The script in file = API & V = 2 can be parsed in almost any browser without generating errors. Therefore, you can include the script file before checking the browser compatibility.

 

6. URL of relevant materials:

Google map API synchronization Chinese documentation: http://www.codechina.org/doc/google/gmapapi/

Baidu: http://wenku.baidu.com/view/a2885c27a5e9856a561260b2.html

Csdn blog: http://blog.csdn.net/jiali765/archive/2010/03/03/5338265.aspx

Http://www.jbedu.com/study/jishuwenzhang/196.html