1

Googleマップビュー上の既存のマーカーの場所のセットを前提として、ポイントをポリラインオーバーレイに追加するにはどうすればよいですか？

私は、ユーザーがAJAX呼び出しを介して取得した一連のGPS座標に基づいて停車地を選択できるWebツアーアプリケーションを構築しています。すべてのポイントがマップに表示されているため、この部分は正常に機能します。

私の問題は、マーカーの位置のみをポリラインに追加したいということです。現在、選択されたポイントはtourList配列に追加され、JSON配列に変換され、jqueryajaxpost呼び出しを介して投稿されます。つまり、クリックイベントハンドラーが一部で機能していることはわかっています。

この質問は、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

「マーカーの位置のみをポリラインに追加したい」と書きましたが、コードのセットアップ方法では、マーカーがクリックされるたびにポリラインに新しい頂点が追加されるか、マップの空白部分がクリックされます。ポリラインを単独で更新するには、リスナーの外にある必要があります。

変更が必要な箇所が2箇所ありましたが、

 visitPoints.push(marker.latlng);

にmarker.getPosition()

そしてevent.latlng終わり近くにevent.latLng（Lngの大文字L）。

テスト中に問題が発生しました。ドキュメントでは、MVCArray が Polyline パスに割り当てられたときの自動更新について説明しています。ただし、Polyline は初期化されていない MVCArray (visitPoints が空) を好まないようです。マーカーをクリックしたときに自動更新が行われませんでした。

初期の LatLng で設定した場合にのみ、期待どおりに機能しましたが、最初のポイントがどこにあるかわからないため、visitPoints を捨てることになりました。最善の方法は、Ajax が返されたときに MVCArray visitPoints で Polyline を初期化することだと思います。以下のデモでは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
于 2012-06-07T15:58:19.567 に答える