4

私はJavascriptとGoogleマップAPIが初めてで、このリンクをたどってマーカーを削除しましたが、どうすればそれを機能させることができません。

基本的に、ユーザーがアドレスを入力してボタンをクリックすると、ボタンを使用してマーカーを生成したいと考えています。ユーザーが新しい住所を入力してボタンをもう一度クリックすると、古いマーカーが削除され、新しいマーカーが新しい住所に固定されます。マーカーもドラッグ可能です。

ここに私のjsコードがあります:

$('#geocode').live('click',function() {
        codeAddress();
        return false;
});    

function codeAddress() {
                    var address = document.getElementById('location').value;
                    geocoder.geocode( { 'address': address}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {

                                map.setCenter(results[0].geometry.location);
                                if (marker) marker.setMap(null);
                                if (marker) delete marker;
                                var marker = new google.maps.Marker({
                                     draggable:true,    
                                      map: map,
                                      position: results[0].geometry.location
                                  });

                                 var newlat = results[0].geometry.location.lat();
                                 var newlng = results[0].geometry.location.lng(); 
                                 document.getElementById('mwqsflatlng').value = (newlat+' , '+newlng);
                                  draggeablemarker(marker);
                                } else {
                                  alert('Geocode was not successful for the following reason: ' + status);
                                }
                    });
            }

更新 検査要素を確認すると、次のエラーが表示されました。

キャッチされていない TypeError: 未定義のメソッド 'setMap' を呼び出せません

4

1 に答える 1

15

marker後でアクセスできるようにするには、オブジェクトへの参照が必要です。マップを一度に 1 つだけ表示するように制限する場合は、マップを削除して再作成する代わりにmarker、markers プロパティを更新できます。Position

マーカーの位置を変更したり、マップ上にマーカーが存在しない場合は新しいマーカーを作成したりできる関数を次に示します。location パラメータはLatLng、 Geocoder によって返されるオブジェクトと同じ Google オブジェクトresults[0].geometry.locationです。

marker変数が関数スコープの外で定義されていることに注意してください。これにより、後でマーカーを参照できるようになります。

var marker;

function placeMarker(location) {
    if (marker) {
        //if marker already was created change positon
        marker.setPosition(location);
    } else {
        //create a marker
        marker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });
    }
}

したがって、ジオコード成功関数の場合、結果をこの関数に渡すだけで済みます。

geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
       placeMarker(results[0].geometry.location);

}
...

これがコンセプトのフィドルです。 地図をクリックすると、マーカーが目的の場所に移動します。

于 2013-05-15T21:15:49.290 に答える