将现有标记添加到新的折线叠加层

Question

鉴于 Google 地图视图上的一组现有标记位置，我如何将这些点添加到折线叠加层？

我正在构建一个网络游览应用程序，用户可以在其中根据通过 AJAX 调用检索到的一组 GPS 坐标来选择停靠点。这部分工作正常，因为所有点都显示在地图上。

我的问题是我只想将标记位置添加到折线。目前，选定的点被添加到 tourList 数组中，该数组被转换为 JSON 数组并通过 jquery ajax post 调用发布。所以我知道点击事件处理程序正在为一个部分工作。

This question 几乎可以满足我的需求，但它是为 Maps API v2 设计的，而我正在使用 V3。

到目前为止我得到了什么：

//page-specific global variables
var visitPoints = new google.maps.MVCArray();
var polyLine;
var map;

window.onload= function(){
  //set initial map location
  map = new google.maps.Map(
    document.getElementById("map"), mapOptions);    

  //set up polyline capability
  var polyOptions = new google.maps.Polyline({
    path: visitPoints,
    map: map
  });

  polyLine = new google.maps.Polyline(polyOptions);
  polyLine.setMap(map); 

  //get all the GPS locations in the database  This function and makeMarkers works 
  //as designed
  var request = $.ajax({
    type:"GET",
    url: "includes/phpscripts.php?action=cords",
    dataType:"json",
    success: makeMarkers
  });

  //Populate the map view with the locations and save tour stops in array
  function makeMarkers(response){
    console.log("Response Length: "+response.length)
    for (var i=0; i< response.length; i++){
      var marker= new google.maps.Marker({
        position: new google.maps.LatLng(response[i].lat, response[i].lon),
        map: map,
        title: response[i].fileName
      });

      //anonymous function wrapper to create distinct markers
      (function(marker){
        google.maps.event.addListener(marker, 'click', function(){

          tourList.push(marker); //add marker to tour list
          visitPoints.push(marker.latlng); //add location to polyline array
          console.log("Tour List length- # stops: "+tourList.length);

        });
      })(marker);    
    }
  }

  //listener for poline click
  google.maps.event.addListener(map, 'click', updatePolyline)

} //end onload function

//updates the polyline user selections
function updatePolyline(event){
  var path = polyLine.getPath();
  path.push(event.latlng);
} //end updatePolyline

目前，我在 Firebug 中没有收到任何脚本警告，但从未调用 updatePolyline 函数。

是否需要在标记侦听器中添加侦听器来更新折线？

Answer 1

您写了 “我只想将标记位置添加到折线” 尽管代码的设置方式是，折线每次单击标记时都会添加一个新顶点，或者是空白部分点击地图的。对于要自行更新的折线，它必须在侦听器之外。

有两个地方需要改，

 visitPoints.push(marker.latlng);

致marker.getPosition()

event.latlng 接近结尾，event.latLng（大写 L 表示 Lng）。

我在测试时遇到了一些困难。文档描述了将 MVCArray 分配给折线路径时的自动更新；但是，折线似乎不喜欢未初始化的 MVCArray（空访问点）。当我点击标记时，自动更新没有发生。

只有当我使用初始 LatLng 设置它时，它才能按预期工作，但我最终放弃了 visitPoints，因为不知道第一个点在哪里。我想最好的方法是在 Ajax 返回时使用 MVCArray visitPoints 初始化折线。下面的演示使用 getPath, push 而不是 visitPoints。

DEMO http://jsfiddle.net/yV6xv/8/（点击标记或地图查看线路更新）

初始化visitPoints 以使其余代码按预期运行，以及对marker.latlng 和event.latlng 的一些小改动。第一次单击将定义线的第一个点，随后的单击将延长线。

^{一定有更好的办法}

演示 http://jsfiddle.net/yV6xv/9/

//page-specific global variables
var visitPoints = new google.maps.MVCArray();
var polyLine;
var map;

// REDEFINING mapOptions and tourList
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP};
var tourList = [];

window.onload= function(){
  //set initial map location
  map = new google.maps.Map(
    document.getElementById("map"), mapOptions);    

  //initialization hack
  visitPoints.push(new google.maps.LatLng(0,0));

  //set up polyline capability
  var polyOptions = new google.maps.Polyline({
    path: visitPoints,
    map: map
  });

  //complete initialization hack
  visitPoints.pop();

  polyLine = new google.maps.Polyline(polyOptions);
  polyLine.setMap(map); 

  //get all the GPS locations in the database  This function and makeMarkers works 

/* TEMPORARY COMMENTING OUT
  //as designed
  var request = $.ajax({
    type:"GET",
    url: "includes/phpscripts.php?action=cords",
    dataType:"json",
    success: makeMarkers
  });
*/

makeMarkers([{lat:0, lon:0},{lat:10, lon:10},{lat:15, lon:20},{lat:20, lon:30}]);


  //Populate the map view with the locations and save tour stops in array
  function makeMarkers(response){
    console.log("Response Length: "+response.length)
    for (var i=0; i< response.length; i++){
      var marker= new google.maps.Marker({
        position: new google.maps.LatLng(response[i].lat, response[i].lon),
        map: map,
        title: response[i].fileName
      });

      //anonymous function wrapper to create distinct markers
      (function(marker){
        google.maps.event.addListener(marker, 'click', function(){

          tourList.push(marker); //add marker to tour list
          visitPoints.push(marker.getPosition()); //add location to polyline array
          console.log("Tour List length- # stops: "+tourList.length);

        });
      })(marker);    
    }
  }

  //listener for poline click
  google.maps.event.addListener(map, 'click', updatePolyline)

} //end onload function

//updates the polyline user selections
function updatePolyline(event){
  var path = polyLine.getPath();
  path.push(event.latLng);
} //end updatePolyline