3

我正在尝试为一些地图标记创建侦听器。我可以创建标记，它们在地图上，但是，无论我点击哪个标记，它都会告诉我"Uncaught TypeError: Cannot call method 'open' of undefined"。当我打破开放代码时，它显示标记[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

这几乎是一个常见问题解答。当您的循环结束时， 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 回答