1

マーカーをクリックすると、アイテムに関連するポイント間に線が引かれるこの機能があります。

function showDetails(itemId)
{   
    var newlatlng = itemId.position;
    var xmlhttp;

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("GET", "index.php?r=items/ajaxdetails&id="+itemId.indice, 
                 false);
    xmlhttp.send();




    var checkins = JSON.parse(xmlhttp.responseText);
    var numeroCheckins = checkins.length;

    var polylineCheckins = [];

    var bounds = new google.maps.LatLngBounds();

    for (counter = 0; counter< numeroCheckins; counter++)
    {
        var posizione = new google.maps.LatLng(checkins[counter].lat,
                                               checkins[counter].long);
        polylineCheckins[counter] = posizione;
        bounds.extend(posizione);
    }

    var polyline = new google.maps.Polyline({
        path: polylineCheckins,
        strokeColor: "#FF0000",
        strokeOpacity: 0.5,
        strokeWeight: 5
        });

    polyline.setMap(map);

    map.fitBounds(bounds);
}

すべてが機能していますが、この関数を数回呼び出すと、前の行が常に表示されます。メソッド setMap(null) を使用しようとしましたが、成功せず、ポリラインをリセットしようとしました。

新しいポリラインを描画する前に、前のポリラインを削除した結果を達成したいと思います。

ご協力ありがとうございました

4

2 に答える 2

2

マップ上にポリラインを 1 つだけ保持する最も簡単な方法showDetailsは、グローバル ポリライン変数を作成することです。そうすれば、呼び出されるたびshowDetailsにグローバル変数が変更されます。

現在、実行するたびshowDetailsに新しいポリラインが作成され、それへの参照が返されないため、前のラインのマップを null に設定する方法がわかりません。

  // GLOBAL 
  var detailsPolyline = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 0.5,
    strokeWeight: 5
  });

内側showDetails：

detailsPolyline.setPath(polylineCheckins);
detailsPolyline.setMap(map);

map.fitBounds(bounds);

独自のオブジェクトを作成したphpファイルがないため、使用したテストケース全体を次に示します

  var map;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    showDetails([ {lat: 20, long: 0},
                  {lat: 20, long: 10},
                  {lat: 30, long: 20}]);

    showDetails([ {lat: 10, long: 0},
                  {lat: 10, long: 10},
                  {lat: 20, long: 20}]);
  }

  var detailsPolyline = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 0.5,
    strokeWeight: 5
  });

function showDetails(checkins)
{   
    var numeroCheckins = checkins.length;
    var polylineCheckins = [];
    var bounds = new google.maps.LatLngBounds();

    for (counter = 0; counter< numeroCheckins; counter++)
        {
        var posizione = new google.maps.LatLng(checkins[counter].lat, checkins[counter].long);
        polylineCheckins[counter] = posizione;
        bounds.extend(posizione);
        }

    detailsPolyline.setPath(polylineCheckins);
    detailsPolyline.setMap(map);

    map.fitBounds(bounds);
}
于 2012-06-01T14:11:41.750 に答える
1

関数自体の中で変数を定義しているpolylineため、関数が終了すると、変数は他のメソッド ( などsetMap(null)) の範囲外になります。

これを行うにはいくつかの方法があります。最も簡単な方法は、関数の外でポリラインをグローバル変数として定義することです。

var polyline = null;

function showDetails(itemId)
{ 
  if (polyline != null)
  {
    polyline.setMap(null);
    polyline = null;
  }

  /* more code */

  polyline = new google.maps.Polyline({
    path: polylineCheckins,
    strokeColor: "#FF0000",
    strokeOpacity: 0.5,
    strokeWeight: 5
  });

  polyline.setMap(map);

  map.fitBounds(bounds);
}
于 2012-06-01T14:10:35.930 に答える