0

尝试创建此处看到的地图功能的新版本：http ://www.daftlogic.com/projects-google-maps-distance-calculator.htm 但使用 v3 api。

到目前为止，我能够在点击时设置标记并可以绘制测地线折线。我目前遇到的问题是：

  • 在标记拖动时更新折线
  • 我很确定我必须将每个标记放在一个数组中并执行一个 for 循环，以便我可以继续单击并添加将增加总距离的点。
  • 正确显示距离。

我创建了一个 jsfiddle：http: //jsfiddle.net/wyZyS/

编辑：我意识到我没有调用“更新”功能。我正在尝试为当前的每个标记创建数组。您看到的计算是将米转换为海里。

4

1 回答 1

0

不久前我写了这样的东西作为练习。遗憾的是它只在 Chrome 中正常工作，在其他浏览器中有奇怪的错误。距离函数应该在 IE9 中工作。

我的想法是为drag您的标记添加侦听器并保留一条表示路径的折线，并在拖动标记时更新其路径。

演示 http://freezoo.alwaysdata.net/freezoomaps/freezoomaps.html

      google.maps.event.addListener(tmpNode, 'drag', function(event) {
        distance.drawPath();
      });


    distance.drawPath = function() {
      distance.countNodes();
      var coords = [];
      for (var i = 0; i < distance.nodes.length; i++) {
        coords.push(distance.nodes[i].getPosition());
      }
      distance.line.setPath(coords);

      meters = google.maps.geometry.spherical.computeLength(coords);
      $("#distance_km").val((meters/1000).toFixed(3));
      $("#distance_mi").val((meters/1609.344).toFixed(3));
    }

    distance.countNodes = function() {
      var count = 0;
      for (var i = distance.nodes.length - 1; i >= 0; i--) {
        if (distance.nodes[i].getMap() == null) {
          distance.nodes.splice(i, 1);
        }
        else {
          count++;
        }
      }
      return count;
    }

    distance.clearNodes = function() {
      for(var i = 0; i < distance.nodes.length; i++) {
        distance.nodes[i].setMap(null);
      }
      distance.drawPath();
    }
于 2012-09-22T21:36:15.713 回答