Google Map API learning records

At the end of last year, Google Map API was used as a GIS system, hereinafter referred to as GMA. When I first looked at GMA, I felt that the engineers who wrote GMA were really strong, and they used Javascript in a very clear way, he is indeed the world's top company;

Next I will summarize the problems I encountered at ordinary times. By the way, I would like to make a record and forget it. It would be better if I could find a solution to your problem here!

1. Limit the zoom level of the map

We know that the scale level of the GMA map is 1-20. What should we do if we only allow users to operate the map within the range of 4-15? Here is a solution!
// Limit the zoom level
// Min
G_PHYSICAL_MAP.getMinimumResolution = function () {return _ zoomMinLevel ;};
G_NORMAL_MAP.getMinimumResolution = function () {return _ zoomMinLevel ;};
G_SATELLITE_MAP.getMinimumResolution = function () {return _ zoomMinLevel ;};
G_HYBRID_MAP.getMinimumResolution = function () {return _ zoomMinLevel ;};
// Max
G_PHYSICAL_MAP.getMaximumResolution = function () {return _ zoomMaxLevel ;};
G_NORMAL_MAP.getMaximumResolution = function () {return _ zoomMaxLevel ;};
G_SATELLITE_MAP.getMaximumResolution = function () {return _ zoomMaxLevel ;};
G_HYBRID_MAP.getMaximumResolution = function () {return _ zoomMaxLevel ;};
2. Bind The right mouse button
When we use Google Maps to check a place, if you right-click the place and a menu appears, some operations such as "starting from this", "ending from this", "enlarging", and "downgrading" are included. How can we define our own right-click operations? It took a long time to implement this function. Let's not talk about it much. Let's look at the Code directly:

/* Init Google Map Mouse Right ContextMenu Start */function initializeGoogleMapContextMenu() {    /*contextMenu*/    _contextMenu = document.createElement("div");    $(_contextMenu).css({ display: "none" });    var contextMenuImage = document.createElement("img");    $(contextMenuImage).css({ cursor: "pointer" });    $(contextMenuImage).click(clickContextMenuEvent);    contextMenuImage.src = "/images/btn_mouse_right_upload.png";    _contextMenu.appendChild(contextMenuImage);    map.getContainer().appendChild(_contextMenu);    //Bind Event

GEvent. addListener (map, "singlerightclick", function (pixel, tile) {_ contextMenuClickPixel = pixel; var x = _ contextMenuClickPixel. x; var y = _ contextMenuClickPixel. y; if (x> map. getSize (). width-120) {x = map. getSize (). width-120} if (y> map. getSize (). height-100) {y = map. getSize (). height-100} // determines whether to log on

If (! CheckLogin () {alert ("Log on first, upload video"); return;} // set the menu position

Var pos = new GControlPosition (G_ANCHOR_TOP_LEFT, new GSize (x, y); pos. apply (_ contextMenu); displayContextMenu () ;});} function clickContextMenuEvent () {// Google map api built-in pixel-to-Coordinate function

Var point = map. fromContainerPixelToLatLng (new GPoint (_ contextMenuClickPixel. x, _ contextMenuClickPixel. y); var _ params = {lat: point. lat (), lng: point. lng ()}; // a window is displayed.

Var myHtml = createIframeHtml (310,310, "upload. aspx", _ params); map. openInfoWindowHtml (point, myHtml)} // display menu

Function displayContextMenu () {$ (_ contextMenu). show (); // click any location to hide the menu

$ (Document). one ('click', hideContextMenu);} // hide the menu

function hideContextMenu() {    $(_contextMenu).hide();}/* Init Google Map Mouse Right ContextMenu End */

When initializing Google Map, we can directly call the initializeGoogleMapContextMenu () method. Among them, my right-click menu is just an image. You can design it based on your actual situation.

3. Custom GroundOverlay
There is a GGroundOverlay class in GMA, which can be used to map or strip any position on the map. But when I use it to paste a radar chart or a cloud map, I find that it always posts a wrong position to me, my radar chart or cloud map first obtains the coordinates of the Southwest and Northeast points and the coordinates of the center points based on the current window, and then calculates the maximum and minimum dimension values corresponding to the current window, to generate a radar chart or cloud map, and finally paste the generated radar chart or cloud map on the current window port. I tried it several times and used it to always post errors to me. It seems that I have reduced my figure.
There is no way to do it. I simply wrote one according to the GMA tutorial. Although I feel that the example he gave should be the same as what he built in, however, you can paste the correct information by yourself!

//GISGroundOverlayfunction GISGroundOverlay(imageUrl, bounds, opacity) {    this.imageUrl_ = imageUrl;    this.bounds_ = bounds;    this.opacity_ = opacity || 1;    this.overlayImgId_ = "__groundoverlay_img";}GISGroundOverlay.prototype = new GOverlay();GISGroundOverlay.prototype.initialize = function(map) {    var pane = map.getPane(G_MAP_MAP_PANE);    $(pane).empty();    var div = document.createElement("div");    div.style.position = "absolute";    var img = document.createElement("img");    img.id = this.overlayImgId_;    img.src = this.imageUrl_;    $(img).css({ "opacity": this.opacity_ });    if (this.imageUrl_) {        $(div).append(img);    }    pane.appendChild(div);    this.div_ = div;    this.map_ = map;    this.img_ = img;}GISGroundOverlay.prototype.setOverlayImage = function(src) {    if (src) {        $("#" + this.overlayImgId_).attr("src",src);    }}GISGroundOverlay.prototype.remove = function() {    if (this.div_.parentNode)        this.div_.parentNode.removeChild(this.div_);}GISGroundOverlay.prototype.copy = function() {    return new GISOverlay(this.bounds_);}GISGroundOverlay.prototype.setOpacity = function(opacity) {    $(this.img_).css({ "opacity": opacity });}GISGroundOverlay.prototype.redraw = function(force) {    if (!force) return;    // Calculate the DIV coordinates of two opposite corners of our bounds to    // get the size and position of our rectangle    var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());    var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());    var width = Math.abs(c2.x - c1.x);    var height = Math.abs(c2.y - c1.y);    var left = Math.min(c2.x, c1.x);    var top = Math.min(c2.y, c1.y);    // Now position our DIV based on the DIV coordinates of our bounds    this.div_.style.width = width + "px";    this.div_.style.height = height + "px";    this.div_.style.left = left + "px";    this.div_.style.top = top + "px";}

The following lists some reference sites for Google map APIs:

http://econym.org.uk/gmap/
http://maps.forum.nu/
http://koti.mbnet.fi/ojalesa/exam/index.html

Author: xingbaifang

Web:http://xbf321.cnblogs.com/

Time:2010,3,13

Tag: Google map api, right-click menu, custom Overlay, limit zoom level