Question

考虑到Google地图视图中的一组现有标记位置，如何将这些点添加到PolyLine叠加层？

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

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

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（Lng的大写字母L）。

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

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

DEMO http://jsfiddle.net/yV6xv/8/（点击标记或地图进行行更新）

将visitPoints初始化为肮脏的黑客，以便其余代码按预期运行，并对marker.latlng和event.latlng进行一些细微更改。第一次单击将定义该行的第一个点，随后的单击将扩展该行。

^{必须有更好的方法}

DEMO 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

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

1 个答案: