Google Map Api practices

Source: Internet
Author: User

Compared with ESRI, MapInfo, and the domestic SuperMap, MapGIS, and other GIS platform software, the functions of Google Map APIs may not be worth mentioning, however, google's high-precision satellite image and geographic data can not help but make our eyes shine. Based on Goolge Earth, real-time traffic, 3D street view is even more dazzling. The basic Goolge Map api is enough to provide us with basic GIS functions, including basic information query and positioning.

Youyou picture is an app that I wrote in www.lvtumap.com to provide youyou with photos for browsing based on the google map api, the main function is to obtain and Mark scenic spots in the current region in the corresponding geographical location, so that you can view the pictures of scenic spots on the map. This also allows us to feel exotic scenery at home, enter "Hawaii" in the search bar below to go to Hawaii and click "get the picture of the current view" to see the beauty of Hawaii. The functions include the following:

1. Obtain the image. Youyou images are obtained by the panoramio api of the website. It is also an image storage website under google. You can specify the longitude and latitude of the image shooting location when storing images, or if the image itself has latitude and longitude information, it can be automatically saved to the specified geographical location. Panoramio api details can be viewed on its website. We mainly send an HttpWebRequest request, including the minx, miny, maxx, maxy and other parameters in the view area, in this way, the detailed image information in the view can be obtained and returned in json format.

2. Process json. The json returned by panoramio contains a lot of information, including the image address, latitude and longitude coordinates, and so on. By processing it, we generate the corresponding Google Map Api Marker and place it on the Map for annotation.

For (var I = 0; I <photos. length; I ++ ){
Var icon = new GIcon (masterIcon, getImageUrl ("mini_square", photos [I]. photo_id ));
Var marker = new GMarker (new GLatLng (photos [I]. latitude, photos [I]. longpolling), icon );
Marker. photo = photos [I];
Markers [I] = marker;
Map. addOverlay (marker, icon );
}

3. Set monitoring on the map. You can click an image to display a large image for ease of viewing.

GEvent. addListener (map, "click", function (overlay, point ){
If (! Overlay |! Overlay. photo)
Return;
Var p = overlay. photo;
Showinfowindow (overlay, p );
});

4. Ajax technology is used throughout the process to initiate a call to handler in client js, initiate an HttpWebRequest to panoramio in handler, and return the corresponding json format string. Then, after using js to access the json-Format String eval, read the corresponding photo address and corresponding latitude and longitude, and you will be able to display images in different regions without any additional efforts. Demo see http://www.lvtumap.com/MapPic.aspx

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.