Google Map API学习记录

去年年底用Google Map API做了一个GIS系统，以下简称GMA,初看GMA的时候感觉写GMA工程师确实挺强的，把Javascript运用的如火纯清，不愧是全球顶尖的公司；

下面我就把我平时遇到的问题，总结一下，顺便做个记录备忘一下，如果在这能发现解决你问题的解决方案，那就更好！

1，限制地图的缩放级别

    我们知道GMA的地图的缩放级别是1-20,如果我们只是让用户在4-15范围内操作地图，那怎么办呢？下面就是一个解决方案！
     //限制缩放级别
    //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，绑定鼠标右键操作
      我们在用Google地图查某一个地方的时候，如果你右击鼠标，就会出现一个菜单，包含一些“以此为出发点”、“以此为终点”、“放大”、“缩小”等操作，那我们怎么实现定义自己的右键操作呢？当时为了实现这个功能，还费了好长时间。不多说了，直接看代码：

/* 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 }
        //判断是否登陆

        if (!checkLogin()) {
            alert("请先登录,在上传视频");
            return;
        }
        //设置菜单位置

        var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x, y));
        pos.apply(_contextMenu);
        displayContextMenu();
    });
}
function clickContextMenuEvent() {
    //Google map api内置像素转坐标函数

    var point = map.fromContainerPixelToLatLng(new GPoint(_contextMenuClickPixel.x, _contextMenuClickPixel.y));
    var _params = {
        lat: point.lat(),
        lng: point.lng()
    };
    //弹出一个窗口

    var myHtml = createIframeHtml(310, 310, "upload.aspx", _params);
    map.openInfoWindowHtml(point, myHtml)
}
//显示菜单

function displayContextMenu() {
    $(_contextMenu).show();
    //点击任意位置，隐藏菜单

    $(document).one('click', hideContextMenu);
}
//隐藏菜单

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

我们在初始化Google Map的时候，直接调用initializeGoogleMapContextMenu()方法就行了，其中，我的右键菜单只是一张图片，你可以根据你的实际情况，任意设计。

3，自定义GroundOverlay
     GMA中有一个GGroundOverlay类，用它可以在地图上任意位置贴图或划线，但是当我用它贴雷达图或云图的时候，发现它老是给我把位置贴错，我的雷达图或云图首先根据当前视窗获得西南角和东北角两个点的坐标以及中心点的坐标，然后计算出当前视窗对应的最大维度值和最小维度值，来生成雷达图或云图，最后把生成的雷达图或云图贴在当前的视窗口上。实验了好几次，用它老是给我贴错，好像是把我的图给我缩小了。
    实在没有办法了，就索性按照GMA的教程写了一个，虽然我感觉他给出的例子和他内置的应该一样，但是用自己写的就可以正确的贴上去，十分不解！
   

//GISGroundOverlay
function 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";
}

下面列出一些Google map api的参考站点：

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

Author:兴百放

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

Time:2010,3,13

Tag 标签: Google map api，右键菜单，自定义Overlay，限制缩放级别