google-maps - 谷歌地图信息窗口

Question

我正在尝试为某些 map 标记创建监听器。我可以创建标记，它们在 map 上，但是，无论我点击哪个标记，它都会告诉我 "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);


    }


})

Answer 1

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