2

ユーザーが地図上のどこかをクリックできるようにする次のコードがあり、クリックした場所の GPS 位置を記録します。バックエンドでは適切に機能しますが、ユーザーが複数回クリックすると、マップ上に複数のマーカーが残ります。最後の場所が何であれ常に保持されるため、機能しますが、バックエンドで何が起こっているのかわからないユーザーにとってはやや混乱します。ユーザーがクリックして新しいマーカーを作成するたびに古いマーカーが削除されるようにするためにできる小さなトリックはありますか?

コード：

    var map;
var GPSlocation;


function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -93.4469157);
  var mapOptions = {
    zoom: 4,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
//I save the location right here
    GPSlocation = location;
    document.getElementById("GPSlocation").value = GPSlocation;
    marker = new google.maps.Marker({
    position: location,
    map: map
  });
}
4

2 に答える 2

6

インスタンスsetPositionのメソッドを使用するだけです：google.maps.Marker

var map,
    GPSlocation,
    marker;  // <-- Added

// ... snip ...

function addMarker(location) {
    // ... snip ...
    if (!marker) {
        // Create the marker if it doesn't exist
        marker = new google.maps.Marker({
        position: location,
        map: map
        });
    }
    // Otherwise, simply update its location on the map.
    else { marker.setPosition(location); }
}
于 2012-10-02T04:41:04.077 に答える
3

関数の外で宣言して、マーカーをグローバル変数にします。

var marker;
function addMarker(location) {
    GPSlocation = location;
    document.getElementById("GPSlocation").value = GPSlocation;
    marker = new google.maps.Marker({
        position: location,
        map: map
    });
}

新しいオブジェクトを作成するのではなく、マーカーの位置を更新するだけで効率を上げることもできます。

var marker;
function addMarker(location) {
    GPSlocation = location;
    document.getElementById("GPSlocation").value = GPSlocation;
    if (!marker) {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
    } else {
        marker.setPosition(location);
    }
}
于 2012-10-02T04:40:19.580 に答える