Javascript 谷歌地图中的动态矩形

首先，我对Javascript非常陌生，所以如果我的问题没有得到很好的回答，我很抱歉

我正在用Flash创建一个应用程序，帮助用户计算他们的电费。然后我把这个数字写进一个xml文件

现在我想打开一个网页，显示一个google地图，地图上画了一个矩形，它是根据前面生成的数字动态生成的，并存储在xml文件中

---

我完全不知道如何实现这一点。我已经把我的地图放到了我的页面上，它可以按我想要的比例100%缩放，但是我根本无法理解动态矩形部分。如果你想在地图上放置一个矩形，你可以创建一个

google.maps.Rectangle

。如果您想在地图上创建一个矩形标签，您可能对InfoBox实用程序库更感兴趣。

，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>

矩形由点的宽度定义（整个世界是256x256点），因此在将其中心指定给更传统的车床时需要进行一些转换

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

最后，创建了一个矩形，其中包含一个国家名称，该名称进入a（这里使用v1.1.5，您可以热链接到，尽管我更喜欢保存本地副本）

由于拖动矩形似乎不可能，因此其中心的标记可以用作控制柄。拖动时，关联的矩形将随之移动

  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类和构造函数中完成，而矩形具有笔划颜色、厚度、不透明度和填充颜色等选项。

Wow，感谢您的深入回复！Oops，我还没有打算发布：），看起来它会工作，但我的问题是我将处理来自flash应用程序的单个数字。如何将其转换为经度和纬度点？这将如何保持一个适当的规模，以便您可以比较不同的数字。（我不想在同一张地图上创建多个输出，但我计划将这些输出打印出来或发布到facebook上，这样人们就可以看到他们如何与其他用户进行比较。）@Quill你能举一个来自Flash的这样一个数字的例子吗？我不明白。这是分数吗？它真的代表世界坐标吗？或者在问题中发布XML的外观。谷歌地图需要一个放置矩形的位置。你的意思是将许多矩形并排放置，每个矩形代表一个人吗？如果你改变了你的问题，请在这里写另一条评论，这样我会得到通知。对不起，我没有XML代码的示例。这是从一个不同的部分，比我的工作项目。据我所知，到目前为止还没有找到答案，我知道这可能会妨碍任何人帮助我的能力。这是我正在寻找的碳足迹可视化。所以flash应用程序会告诉人们他们排放了多少吨二氧化碳，然后我想创建一个矩形来表示地图上的那个区域，这样他们就有了一个想法，基于他们知道的某个东西的真实世界的图像，它实际上有多大。因此，我将收到的数字将是9tonnes@Quill等等，地图在Flash应用程序中吗？即使没有，我也不知道如何将数据从Flash移动到Javascript页面。我的建议是输出国家名称和以吨为单位的体积，以及与国家名称匹配的地图坐标。除此之外，我无能为力，因为我从未使用Flash制作过应用程序。当用户浏览Flash应用程序时，它将打开一个浏览器页面。我希望在此之前，它能将用户结果写入XML文件。当浏览器打开时，地图将读取用户足迹并在地图上显示该尺寸的覆盖图。一旦为用户打开页面，它就不会再次更改。因此，假设用户的足迹是每年1吨二氧化碳，1吨是823万立方。或者高度为1米，它是一个23.14平方米的矩形。所以我想在页面上显示一个这样大小的矩形。我不知道这是否有任何帮助，但再次感谢您的时间，这不是我想要创建的标签，而是一个数据可视化。我想从flash应用程序中获取数字，直观地向人们展示谷歌地图上的一个区域有多大。但是，为回应干杯！长方形是我回答的第一个选项；第二步是创建标签。但追求@Heitor的答案；它有更多的细节+1 Heitor-我已经浏览了矩形api文档，但不幸的是，它似乎只指向我创建一个静态矩形，而不是一个根据写入外部文件的数据而变化的矩形。

google.maps.rectangle

类不是静态的，它有一个

setBounds

方法，允许您根据需要调整边界。

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