Question

首先，我对Javascript很陌生，很抱歉，如果我的问题很难解决。

我正在Flash中创建一个应用程序来帮助用户计算他们的电费。然后我拿这个数字并将其写入xml文件。

现在我打算打开一个网页并显示一个谷歌地图，地图上有一个矩形，它是从之前生成的数字动态生成的，并存储在xml文件中。

我完全迷失了如何实现这一目标的地方。我把我的地图放到了我的页面上，它按照我的要求缩放了100％，但我根本找不到动态矩形部分。任何有正确方向的想法或指示都会受到高度赞赏。

Answer 1

如果您只想在地图上放置矩形，可以创建google.maps.Rectangle ^api-doc。如果要在地图上创建矩形标签，您可能对InfoBox Utility Library ^wiki-page更感兴趣。

Answer 2

<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;
      }
     });
    }
  }

矩形由点宽度定义（整个世界是256x256点），因此在将它们的中心分配给更传统的LatLng时需要进行一些转换。

  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类和构造函数中完成，矩形包含笔触颜色，粗细，不透明度和填充颜色等选项。

Google地图中的动态矩形

2 个答案: