Question

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

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

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

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

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

Answer 1

我刚才写了这样的东西作为练习。可悲的是，它仅适用于Chrome，它在其他浏览器中存在奇怪的错误。距离函数应该在IE9中有效。

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

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

谷歌地图v3距离

1 个答案: