0

「maps.googleapis.com/maps/api/js?v=3」を使用して Google マップを作成しました。そのマップでは、さまざまな場所のマーカーを表示していますが、これは正常に機能しています。以下は私が使用したコードです。

google.maps.event.addDomListener(window, 'load', function() {
                var map = new google.maps.Map(document.getElementById('map1'), {
                      zoom: 10,
                      center: new google.maps.LatLng(latitude, longitude),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({
                                map: map,
                                position: new google.maps.LatLng(23.42323, -45.47653),

                            });
});

ここで、Ajax に位置マーカーをさらに追加したいと思います。例: ドロップダウンから場所の名前を追加すると、サーバー側への ajax 呼び出しが行われます。場所の緯度経度を抜き出し、地図上に表示します。どうすれば達成できますか。

ajax 呼び出しを行う別の js 関数を作成しましたが、その内部でコードが「マップ」インスタンスを取得していません。ここでは、このコードのみを使用しています。 

    new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(23.42323, -45.47653),
});

ここでは、マップを再度初期化していません。したがって、マップインスタンスを取得せず、エラーをスローします。それを修正する方法。

4

2 に答える 2

1

マップのスコープは、イベント ハンドル内に限定されます。これを試して：

var map, markerCollection;

google.maps.event.addDomListener(window, 'load', function() {
    map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

function addMarker(lat, lng){
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
    });
    markerCollection.push(marker);
}

注: 1) マップの中心を定義するときに、「緯度」と「経度」の値を入力してください。そうしないと、マップが表示されるだけです。2）マーカーを配列に追加するのがベストプラクティスではないかもしれないことは知っていますが、これにより後者に簡単にアクセスできることがわかりました。

于 2013-03-29T15:15:07.593 に答える
0

mapはグローバル変数ではないため、逆参照されています。オブジェクトmapをグローバルにするか、すべてのコードを格納するコンテナー関数内に作成します。

グローバル JS の例

//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
    map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(23.42323, -45.47653),
    });
});
于 2013-03-29T15:14:10.940 に答える