News Contents
信息中心

Google Map API學習記錄

發表日期:2020/3/29      瀏覽次數:

去年年底用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的教程寫了一個,雖然我感覺他給出的例子和他內置的應該一樣,但是用自己寫的就可以正確的貼上去,十分不解!
   

//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";
}
 
 
下面列出一些Google map api的參考站點:
http://econym.org.uk/gmap/
http://maps.forum.nu/
http://koti.mbnet.fi/ojalesa/exam/index.html


盛大建站承接個人、公司、企業的網站建設、網頁設計、網店制作、獨立商城制作、外貿網站制作,也承接同行介紹的業務,歡迎聯系!
本站承接主要業務如下:
1、提供免備案虛擬主機(網站空間),有獨立國內服務器、高速美國服務器、香港服務器、韓國服務器、日本服務器,>> http://www.fuanxx.com
2、網站建設:個人網店制作、企業建站、公司網站、新聞、下載等;論壇、博客網站搭建,承接外貿英文站制作
3、承接阿里巴巴、京東、淘寶、天貓等的商品數據采集
4、網站防釣魚,可以過360、QQ、搜狗、金山、微信攔截
5、要就發IP網站限制訪問系統,防止同行抄襲并保障海外客戶訪問不受影響,>> http://www.198ip.com
  下一篇:沒有了!
十年如一日,我們專注于提供高品質 定制網站建設服務!
您的信任,我們的責任,期待與您的合作!
广西11选5技巧