Question

我试图在谷歌地图中绘制几个位置。我有两个包含纬度和数组的阵列。某些地方的经度。然后，使用该数组，我必须将它们绘制到谷歌地图＆amp;必须为这些地方添加标记。我做到了。

现在......点击标记后，会弹出一个信息窗口，显示该地点的详细信息。我试过这样做。但是不知道什么，没有任何反应。

您也可以在下面找到JavaScript代码。

有谁能告诉我这段代码有什么问题。

var map;
var marker1;
var marker2;
var lat_array = [7.170000076293945,
    9.819999694824219, 8.470000267028809];
var lon_array = [79.87000274658203,
    78.06999969482422, 76.94999694824219];
var contentString= new Array();

function initialize() {
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(7.170000076293945, 79.87000274658203)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    var count_total = lat_array.length;
    for (i = 0; i < count_total; i++) {
        var myLatlng = new google.maps.LatLng(lat_array[i], lon_array[i]);
        bounds.extend(myLatlng);
        var image = 'mapmarkers/you-are-here-2.png';
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'I am here' /*,
            icon: image */
        });
         contentString[i] = '<div id="content">'+
                            '<div id="siteNotice">'+
                            '</div>'+
                            '<h1 id="firstHeading" class="firstHeading">'+lon_array[i]+'</h1>'+
                            '<div id="bodyContent">'+
                            '<p><b>ICAO:</b>'+lat_array[i]+'.</p>'+
                            '</div>'+
                            '</div>';
        infowindow = new google.maps.InfoWindow
                         (
                           {
                            content: contentString[i]
                           }
                         );

      google.maps.event.addListener(marker, 'click', function()
                        {
                            infowindow.open(map,marker);
                        });

   map.fitBounds(bounds);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

更新

我忘了初始化内容字符串数组。现在已经完成了。但信息窗口未显示正确的详细信息。在我点击的任何标记上，信息窗口仅显示一个位置。

NEW FIDDLE

Answer 1

由于在JavaScript中没有为if / for块创建新范围，因此每个标记的每次点击将始终对应于最后创建的范围，在for循环中创建一个闭包/新范围：

for (i = 0; i < count_total; i++) {
  (function() {})(
    ...
  );
}

工作代码：

var map;
var lat_array = [7.170000076293945,
    9.819999694824219, 8.470000267028809];
var lon_array = [79.87000274658203,
    78.06999969482422, 76.94999694824219];


function initialize() {
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(7.170000076293945, 79.87000274658203)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    var count_total = lat_array.length;
    for (i = 0; i < count_total; i++) {
        (function(){
        var myLatlng = new google.maps.LatLng(lat_array[i], lon_array[i]);
        bounds.extend(myLatlng);
        var image = 'mapmarkers/you-are-here-2.png';
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'I am here'
        });
        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">'+lon_array[i]+'</h1>'+
            '<div id="bodyContent">'+
            '<p><b>ICAO:</b>'+lat_array[i]+'.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow
        (
            {
                content: contentString
            }
        );

                                google.maps.event.addListener(marker, 'click', function()
                        {
                            infowindow.open(map,marker);
                        });

        map.fitBounds(bounds);
            })();
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

Working jsfiddle

无法使用Javascript在Google地图中显示位置详细信息

1 个答案: