无法在谷歌地图气球上看到内容？

Question

twistSection(document.getElementById('page:form:resultsBlock:debugSection').childNodes[0].childNodes[0]); // initially hide the debug section

var contacts = {
    !contactsJson
}; // Array of contact data, some of them might have lat/long info, some we'll have to geocode client side
var coords = []; // Just the latitude/longitude for each contact
var requestCounter = 0;

var markers = []; // Red things we pin to the map.
var balloon = new google.maps.InfoWindow(); // Comic-like baloon that floats over markers.

function geocodeClientSide() {
    for (var i = 0; i < contacts.length; i++) {
        if (contacts[i].Location__Latitude__s != null && contacts[i].Location__Longitude__s != null) {
            coords.push(new google.maps.LatLng(contacts[i].Location__Latitude__s, contacts[i].Location__Longitude__s));
        } else {
            ++requestCounter;
            var address = contacts[i].MailingStreet + ' ' + contacts[i].MailingCity + ' ' + contacts[i].MailingCountry;
            var geocoder = new google.maps.Geocoder();
            if (geocoder) {
                geocoder.geocode({
                    'address': address
                }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        coords.push(results[0].geometry.location);
                    } else {
                        var pTag = document.createElement("p");
                        pTag.innerHTML = status;
                        document.getElementById('log').appendChild(pTag);
                    }
                    if (--requestCounter == 0) {
                        drawMap();
                    }
                });
            }
        }
    }
    // It could be the case that all was geocoded on server side (or simply retrieved from database).
    // So if we're lucky - just proceed to drawing the map.
    if (requestCounter == 0) {
        drawMap();
    }
}

function drawMap() {
    var mapOptions = {
        center: coords[0],
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    for (var i = 0; i < coords.length; ++i) {
        var marker = new google.maps.Marker({
            map: map,
            position: coords[i],
            title: contacts[i].Name,
            zIndex: i
        });

        google.maps.event.addListener(marker, 'click', function () {
            var index = this.zIndex;
            balloon.content = '<b>' + contacts[index].Name + '</b><br/>' + contacts[index].Account.Name + '<br/>' + contacts[index].Email;
            balloon.open(map, marker, content);
        });

        markers.push(marker);
    }
}
geocodeClientSide();

我正在绘制来自 salesforce 的联系人地址列表。它在地图上正确绘制了气球，但没有显示任何内容。

我尝试了很多可能的方法，但我没有在气球上看到内容 谁能告诉我问题出在哪里？

提前致谢

Answer 1

这里有一些信息：https://developers.google.com/maps/documentation/javascript/examples/event-closure

在循环中附加事件时需要使用闭包。这是一个例子：

var locations = [
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
];

for (var i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
        position: locations[i][0],
        map: map,
        title: locations[i][1]
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {

        return function () {
            infowindow.setContent(locations[i][2]);
            infowindow.open(map, marker);
        }

    })(marker, i));
}

注意与您的代码的差异。不要在事件监听器中使用function() { ... }，而是使用(function(marker, i) { ... })(marker, i)

以下是如何使用具有多个标记的单个 InfoWindow 对象的工作演示。

JSFiddle demo

Answer 2

将函数drawMap()中的for循环替换为以下代码：

    for (var i = 0; i < coords.length; ++i) {
    var marker = new google.maps.Marker({
        map: map,
        position: coords[i],
        title: contacts[i].Name,
        zIndex: i
    });

var balloon = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function () {
        var index = this.zIndex;
    balloon.setContent(contacts[index].Name + contacts[index].Account.Name + contacts[index].Email);
        balloon.open(map, marker);
    });

    markers.push(marker);
}