谷歌地圖中的動態矩形

Question

首先，我對Javascript很新，很抱歉，如果我的問題遇到很差。

我在Flash中創建一個應用程序，以幫助用戶計算他們的電氣成本。然後我將這個數字寫入一個xml文件。

現在我正在打開一個網頁並顯示一個谷歌地圖，並且在地圖上繪製了一個矩形，它是從先前生成的數字中動態生成的，並存儲在xml文件中。

我完全失去了打開如何實現這個目標的地方。我已經將自己的地圖放到了我的頁面上，並且按照我的意願縮放了100％，但我根本找不到動態矩形部分。任何想法或指針在正確的方向非常讚賞。

Answer 1

In this latest version，XML文件

<countries> 
    <country name="USA" lat="40.0" lng="-100.0" width="30.0"/> 
    <country name="France" lat="46.6" lng="2.7" width="10"/> 
    <country name="Germany" lat="51.1" lng="10.1" width="20"/> 
</countries> 

是儘快地圖瓦片完成加載加載。如果我沒有等待平鋪加載完成，我無法正確調用getProjection。文檔聲明獲取投影需要初始化地圖，並建議偵聽projection_changed。這兩種方式的工作，但我仍然覺得監聽tiles_loaded是更安全的，如果xml加載出現問題，它將被再次調用，如果地圖放大或平移一個明顯的數額。

var map; 
    var xmlLoaded = false; 

    function initialize() { 
    var mapOptions = { center: new google.maps.LatLng(30.0, 0.0), zoom: 2, 
     mapTypeId: google.maps.MapTypeId.ROADMAP }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    google.maps.event.addListener(map, 'tilesloaded', loadData); 
    } 

    function loadData() { 
    if(!xmlLoaded) { 
    $.ajax({ 
     type: "GET", 
     url: "co2data.xml", 
     dataType: "xml", 
     success: function(xml) { 
     var countries = xml.documentElement.getElementsByTagName("country"); 
     for(var i = 0, country; country = countries[i]; i++) { 
      var name = country.getAttribute("name"); 

      var lat = parseFloat(country.getAttribute("lat")); 
      var lng = parseFloat(country.getAttribute("lng")); 
      var point = map.getProjection().fromLatLngToPoint(new google.maps.LatLng(lat,lng)); 

      // width is really an arbitrary unit, relative to CO2 tonnage. 
      // equals the side of the drawn square. 
      // it is measured in google maps points units. 
      var width = parseFloat(country.getAttribute("width")); 

      makeCO2Rect(name, point, width); 
     } 
     xmlLoaded = true; 
     } 
    }); 
    } 
    } 

該矩形是通過在點寬度限定（全世界是256×256個點），所以分配它們的中心到更常規的經緯度時，需要一些轉換。

function rectParamsToBounds(point, width) { 
    var ctrX = point.x; 
    var ctrY = point.y; 

    var swX = ctrX - (width/2); 
    var swY = ctrY - (width/2); 

    var neX = ctrX + (width/2); 
    var neY = ctrY + (width/2); 
    return new google.maps.LatLngBounds(
     map.getProjection().fromPointToLatLng(new google.maps.Point(swX, swY)), 
     map.getProjection().fromPointToLatLng(new google.maps.Point(neX, neY))); 
    } 

最後，矩形與進入一個MarkerWithLabel國家名稱創建（使用V1.1.5在這裏，您可以熱鏈接http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js雖然我更喜歡保存本地副本）

由於拖動矩形似乎不可能，在其中心的一個標記作爲一個句柄。拖動時，關聯的矩形隨之移動。

function makeCO2Rect(name, point, width) { 
    var rect = new google.maps.Rectangle({ 
     map: map, 
     bounds: rectParamsToBounds(point, width) 
    }); 

    var marker = new MarkerWithLabel({ 
     map: map, 
     position: map.getProjection().fromPointToLatLng(new google.maps.Point(point.x, point.y)), 
     draggable: true, 
     raiseOnDrag: false, 
     labelContent: name, 
     labelAnchor: new google.maps.Point(30, 0), 
     labelClass: "labels", // the CSS class for the label 
     labelStyle: {opacity: 1.0} 
    }); 

    google.maps.event.addListener(marker, 'drag', function(event) { 
     var newLatLng = event.latLng; 
     var newPoint = map.getProjection().fromLatLngToPoint(newLatLng); 
     rect.setBounds(rectParamsToBounds(newPoint, width)); 
    }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

樣式化標籤需要在.labels CSS類和構造函數來完成這兩個和矩形有一個像筆觸顏色，厚度，透明度選項，並填充顏色。

Answer 2

如果您只是想在地圖上放置一個矩形形狀，您可以創建一個google.maps.Rectangle^api-doc。如果要在地圖上創建矩形標籤，則可能對InfoBox公用程序庫^wiki-page更感興趣。