3

いくつかのマップマーカーのリスナーを作成しようとしています。マーカーを作成することができ、それらはマップ上にありますが、どのマーカーをクリックしても、それがわかります"Uncaught TypeError: Cannot call method 'open' of undefined"。開いているコードを壊すと、最高のインデックスより1つ多いマーカー[46]が表示されます。そして、どのマーカーをクリックしても、常に同じインデックスをクリックする必要はありません。

編集：コードを編集してすべて貼り付けました。エラーはありませんが、マーカーをクリックしても何も起こりません。Chromeを探していますが、イベントハンドラーが登録されていないようです 

<script>
var map;
var nav = [];
$(document).ready(function () {
    //initialise a map
    init();
    var infowindow = new google.maps.InfoWindow({});
    $.get("xxxxxx.kml", function (data) {
        html = "";
        //loop through placemarks tags                    
        i = 1;
        $(data).find("Placemark").each(function (index, value) {
            //get coordinates and place name
            coords = $(this).find("coordinates").text();
            contentString = $(this).find("description").text();


            var partsOfStr = coords.split(',');
            var lat = parseFloat(partsOfStr[0]);
            var lng = parseFloat(partsOfStr[1]);
            var myLatLng = new google.maps.LatLng(lng, lat);
            place = $(this).find("name").text();

            createMarker(myLatLng, place, contentString, i)

            //store as JSON
            c = coords.split(",")
            nav.push({
                "place": place,
                "lat": c[0],
                "lng": c[1]
            })
            //output as a navigation
            html += "<li>" + place + "</li>";
            i++;
        });
        //output as a navigation
        $(".navigation").append(html);

        //bind clicks on your navigation to scroll to a placemark

        $(".navigation li").bind("click", function () {

            panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat)

            map.panTo(panToPoint);
        })

    });
    markers = [];

    function createMarker(myLatLng, title, contentString, i) {
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: title
        });

        google.maps.event.addListener(markers, 'click', function () {
            infoWindow.setContent(contentString);
            infowindow.open(map, markers[i]);
        });
        markers[i] = marker;
        return marker
    }

    function init() {

        //google.maps.event.addDomListener(window, 'init', Initialize);
        var latlng = new google.maps.LatLng(39.047050, -77.131409);
        var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);


    }


})

4

1 に答える 1

7

これはほとんどFAQです。ループが終了すると、iの値は46になります（ステートメントに基づく）。マーカー46がないため、すべてのクリックリスナーが失敗します。これは、関数クロージャ（マーカーと情報ウィンドウの内容の間の関連付けを保持するcreateMarker関数）で解決できます。

あなたの例（テストされていない）のこのようなものは、マーカー作成ループ内から呼び出し、グローバルマーカー配列を必要としますが、グローバル情報ウィンドウ配列は必要ありません：

//global markers array
markers = [];
// global infowindow
var infowindow = new google.maps.InfoWindow({});

// createMarker function
function createMarker(myLatLng, title, contentString, i)
{
    var marker = new google.maps.Marker({
    position: myLatlng , 
    map: map, 
    title:title
 });

  google.maps.event.addListener(markers, 'click', function() {
    infoWindow.setContent(contentString);
    infowindow.open(map,markers[i]);
  });
  markers[i] = marker;
  return marker
}
于 2012-12-07T17:17:13.853 に答える