Question

首先,我对Javascript来说是新人, 很抱歉,如果我的问题来得不好。

我在 Flash 中创建一个应用程序, 帮助用户计算电费。然后我将这个数字写入 xml 文件。

现在我想打开一个网页, 显示一个谷歌地图, 地图上有一个矩形, 由先前生成的数字动态生成, 并存储在 xml 文件中。

我完全迷失了选择如何实现这一点的地方。我已经把我的地图放在我的页面上,它按我想的大小计算了100%,但是我完全无法找到动态矩形部分。任何正确方向的想法或指针都非常感激。

Answer 1

< a href=" "http://freezoo.alwaysdata.net/xmlrect4.html" rel="nofollow" > 在这个最新版本中, 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>

地图砖一旦装入完成后, 就会立即被装入。如果我没有等待装入的瓦片要完成, 我无法正确调用 < code> get projection 。文档指出, 获取投影需要初始化的地图, 并建议监听 < code> projection_ changed 。两种方式的工作都让我觉得监听已装入的瓷片比较安全, 如果在装入 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)));
  }

最后,创建了一个矩形,其国名为,尽管我更希望省省省省)

由于拖曳矩形似乎不可能, 其中心的一个标记作为把手发挥作用。当它被拖动时, 相关的矩形随之移动。

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

标签必须同时在. label CSS 类和构建器中标出, 矩形可以选择中色、厚度、不透明性和填充颜色等选项。

Answer 2

如果您想要在地图上放置矩形形状, 您可以在地图上创建一个 google. mapps. Rectangle api- doc 。如果您想要在地图上创建矩形标签, 您可能会对InfoBox实用图书馆 < a href="“ http://code.google.com/p/google-maps- plitity-library- v3/wiki/Libraries#InfoBox" rel=" nofolfolpol"\> supsup>wiki- page 更感兴趣。

友情链接