Google map API usage (5) -- basic knowledge of Google map (II)

Source: Internet
Author: User

10. Map attributes

By default, in Google map API, a map is displayed using a standard "Draw" block. However, Google map API also supports other map types. The following are standard map types:

G_normal_map-default view

G_satellite_map-display Google Earth satellite images

G_hybrid_map-hybrid display of common and satellite views

G_default_map_types-these three types of arrays are useful when repeated processing is required.

You can use the setmaptype () method of the gmap2 object to set the map type. For example, the following code sets a map as a satellite view using Google Earth:

VaR map = new gmap2 (document. getelementbyid ("mapcontainer "));

Map. setmaptype (g_satellite_map );

A map also contains a large number of attributes that are useful for understanding the situation. For example, you can use the getbounds () method of the gmap2 object to return the glatlngbounds value.

Each map also contains a scaling level to define the resolution of the current view. In the general map view, you can use 0 (the lowest zoom level, you can see the whole world on the map) to zoom between 19 (the highest zoom level, you can see the independent buildings. The scaling level varies depending on the region you are viewing, because data in some regions on the earth is more detailed than that in other regions. Up to 20 scaling levels can be used in the satellite view.

You can use the getzoom () method of the gmap2 object to retrieve the current scaling level of the map. For more information about scaling levels, map blocks, and creating your own custom map types, see the custom overlay layer section.

 

11. Map Interaction

Now that you have a gmap2 object, you can interact with it. The appearance and behavior of a basic map object are very similar to those of a map that you interact with on a Google Map website and carry a large number of built-in behaviors. The gmap2 object also provides a large number of configuration methods to change the behavior of the map object.

By default, map objects respond to user activities, as on a http://ditu.google.cn. However, you can use a large number of utility methods to change this behavior. For example, the gmap2.disabledragging () method does not allow you to click and drag a map to a new location.

You can also interact with maps through programming. The gmap2 object supports a large number of methods that can directly change the map state. For example, setcenter (), Panto (), and zoomin () methods are programmed to operate a map, rather than through user interaction.

The following example shows a map, waiting for two seconds, and then pan to the new center. The Panto method sets the map center at the specified point. If the specified point is in the visible part of the map, the map moves smoothly to the point. Otherwise, the map jumps to the point. (Reference example:Mytest3.html)

VaR map = new gmap2 (document. getelementbyid ("mapcontainer "));

Map. setcenter (New glatlng (39.970981, 116.314108), 16 );

Window. setTimeout (function () {map. Panto (New glatlng (39.927, 116.407) ;}, 1000 );

You can use Google map API events for more complex interactions.

 

12. Information Window

All maps using the Google map API may display a single "Information Window" of the ginfowindow type. The window displays HTML content in a floating window at the top of the map. The information window is a bit like a text balloon on a comic book; it has a content area and a conical lead, and the head of the lead is placed on a specified point on the map. Click the tag on the Google map to view the activity information window.

The ginfowindow object does not have a constructor. When creating a map, an information window is automatically created and appended to the map. For a specified map, multiple information Windows cannot be displayed at a time, but the information window can be moved and its content can be changed (if needed ).

The gmap2 object provides the openinfowindow () method, which takes one point and one HTML Dom element as the parameter. The HTML Dom element is appended to the Information Window container, and the tip of the Information Window is fixed at the specified point.

The openinfowindowhtml () method of gmap2 is similar, but it uses the HTML string as its second parameter rather than the DOM element.

To create an information window, call the openinfowindow method and pass the location and Dom element to it. The following sample code shows an information window, which is anchored in the map center and contains a simple message "Hello, world ". (Reference example:Mytest4.html)

VaR map = new gmap2 (document. getelementbyid ("mapcontainer "));

Map. setcenter (New glatlng (39.970981, 116.314108), 16 );

Map. openinfowindow (Map. getcenter (), document. createtextnode ("Hello, world! "));

For a complete document on the Information Window, see Google map api reference.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.