javascript - 我的 map 上没有获取 infoWindow

Question

我有 json 数据，我想在 map 上显示 LatLng 数据。现在给定的 LatLng 显示在 map 上，但当我单击时我没有收到信息窗口，请帮忙。我在下面附加了我的代码:这是我的脚本标签。请建议我如何做到这一点，再次感谢您

<script>
    var obj  = {
        "location": [
            {
                "street_address": {
                    "city": "Trichy",
                    "state": "TamilNadu",
                    "address_1": "Test address",
                    "country": "India"
                },
                "gps": {
                    "latitude": 32.67,
                    "longitude": -85.44
                }
            },
            {
                "street_address": {
                    "city": "Madurai",
                    "state": "TamilNadu",
                    "address_1": "Test address",
                    "country": "India"
                },
                "gps": {
                    "latitude": 28.65859029,
                    "longitude": 77.22063432
                }
            },
            {
                "street_address": {
                    "city": "Chennai",
                    "state": "TamilNadu",
                    "address_1": "Test address",
                    "country": "India"
                },
                "gps": {
                    "latitude": 67.1,
                    "longitude": -157.85
                }
            },
            {
                "street_address": {
                    "city": "Combiatore",
                    "state": "TamilNadu",
                    "address_1": "Test address",
                    "country": "India"
                },
                "gps": {
                    "latitude": 52.67,
                    "longitude": -95.44
                }
            },
            {
                "street_address": {
                    "city": "Tirunelveli",
                    "state": "TamilNadu",
                    "address_1": "Test address",
                    "country": "India"
                },
                "gps": {
                    "latitude": 25.9,
                    "longitude": -97.43
                }
            }
        ]
    };
    var place = [];
    var locations = [];
    for(var i = 0; i < obj["location"].length;i++){
        //var data = {"latitude" : 0, "longitude" : 0};   
        //data["latitude"] = obj["location"][i]["gps"]
        locations.push(obj["location"][i]["gps"]);
        place.push(obj["location"][i]["street_address"]);
    }

    console.log(place);
    console.log(locations);
    var pointer = new google.maps.LatLng(51.508742,-0.120850);
    function intialize(){
        var mapOption = {
            zoom : 3,
            center : pointer,
            mapTypeControl:true,
            mapTypeControlOptions: {
                style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP            
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),mapOption);         
        for(var i = 0; i < locations.length; i++){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i]["latitude"], locations[i]["longitude"]),              
                icon: 'map-icon.png'
            });
            marker.setMap(map); 
            console.log(locations[i]["latitude"], locations[i]["longitude"]);       
        }
        for(var i = 0;i < place.length; i++){
            var infoWindow = new google.maps.InfoWindow({
                content : new google.maps.InfoWindow(place[i]["address_1"], place[i]["city"],place[i]["country"],place[i]["state"])
            });
            google.maps.event.addListener(marker, 'click', function(){
                infoWindow.open(map, marker);
            });
            console.log(place[i]["address_1"], place[i]["city"],place[i]["country"],place[i]["state"]); 
        }                   
    }
    google.maps.event.addDomListener(window, 'load', intialize);
</script>

Answer 1

您的代码存在多个问题。

for 循环

在第二个 for 循环中，您要迭代 place 数组，您将访问变量 marker 并期望它是该地点的标记。但是，marker 变量仅在迭代 locations 数组之前在 for 循环中更新。

for(var i = 0; i < locations.length; i++){
    var marker = new google.maps.Marker(...);
    ...
}
for(var i = 0;i < place.length; i++){
    ...
    google.maps.event.addListener(marker, ...);
    // Here marker will always be the last marker that
    // was created in the preceding loop
}

要纠正此问题，请合并两个循环。

for(var i = 0; i < locations.length; i++){
    var marker = new google.maps.Marker(...);
    ...
    google.maps.event.addListener(marker, ...);
    // Here marker will be the current location's marker
}

InfoWindow 构造函数

您没有正确调用 google.maps.InfoWindow 构造函数，因为您为 content 参数指定了另一个 InfoWindow。

var infoWindow = new google.maps.InfoWindow({
    content : new google.maps.InfoWindow(...)
});

但是，API 确实期望 content 是一个字符串(纯文本或 HTML)，猜猜看，其中包含信息窗口的内容。

var infoWindow = new google.maps.InfoWindow({
    content : '<div>Hello, I am an info window</div>'
});

for 循环的范围

最后，for 循环不会创建新的作用域，这意味着局部变量(如 marker)的当前值不会被点击事件处理程序包装起来。因此，在 for 循环完成后，在处理函数中访问这些变量将产生它们的值。

for(var i = 0; i < locations.length; i++){
    var marker = new google.maps.Marker(...);
    ...
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(map, marker);
        // At the time of click the for loop has finished.
        // Thus, marker will be the last marker that was created in the loop.
    });
}

您可以通过将处理程序包装在函数闭包中来解决此问题。哦，顺便说一下，您只需要一个 InfoWindow 实例。

var infoWindow = new google.maps.InfoWindow();

for(var i = 0; i < locations.length; i++){
    var marker = new google.maps.Marker(...);
    ...
    google.maps.event.addListener(marker, 'click', (function(marker, i){
        return function() {
            infoWindow.close();
            infoWindow.setContent("<div>" + place[i]["city"] + "</div>");
            infoWindow.open(map, marker);
            // You could also use this instead of marker here but you'll
            // still need the closure for i
        }
    })(marker, i)); // Pass in marker and i to make the closure work
}

总结

更正后的 initialize 函数的简化版本如下所示 ( JSFiddle )。

function intialize(){
    var mapOption = {
        zoom : 3,
        center : pointer,
        mapTypeControl:true,
        mapTypeControlOptions: {
            style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP            
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),mapOption);         

    var infoWindow = new google.maps.InfoWindow();

    for(var i = 0; i < locations.length; i++){
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i]["latitude"], locations[i]["longitude"])
        });
        marker.setMap(map); 

        google.maps.event.addListener(marker, 'click', (function(marker, i){
            return function() {
                infoWindow.close();
                infoWindow.setContent("<div>" + place[i]["city"] + "</div>");
                infoWindow.open(map, this);
            }
        })(marker, i));
    }                   
}

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