1

给定 Google 地图视图上的一组现有标记位置,如何将这些点添加到折线叠加层?

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

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

这个问题几乎符合我的需要,除了它是为 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 函数。

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

4

1 回答 1

2

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

有两个地方需要改,

 visitPoints.push(marker.latlng);

marker.getPosition()

event.latlng接近尾声(Lng 的大写event.latLngL)。

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

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

DEMO http://jsfiddle.net/yV6xv/8/(点击标记或地图进行线路更新)

一个肮脏的 hack 被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
于 2012-06-07T15:58:19.567 回答