带有来自 json 的地址和标题的 Google 地图标记答案

【问题标题】：Google Maps Markers with address and title from a json带有来自 json 的地址和标题的 Google 地图标记
【发布时间】：2016-12-08 09:08:01
【问题描述】：

有一个带有由 JSON 加载的标记的 GoogleMap。标记显示正确。但是信息窗口只显示最后一个标题（unternehmen / company）。是覆盖问题吗？我该如何解决？

<div id="map" style="height:500px;width:100%;"></div>

<script src="https://maps.googleapis.com/maps/api/js!!!######MYKEY########!!!!" type="text/javascript"></script>

<script type="text/javascript">


var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(50,12),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var json = [

{
    "unternehmen": "Dresden",
    "address": "Dresden, Deutschland"
},
{
    "unternehmen": "Frankfurt",
    "address": "Frankfurt, Deutschland"
}

]

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

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

            var data = json[i],
                address = data.address,
                unternehmen = data.unternehmen;

            geocoder.geocode( { 'address' : address }, function( results ) {

                    var marker = new google.maps.Marker( {
                        map: map,
                        position: results[0].geometry.location,
                        title: unternehmen,
                        animation: google.maps.Animation.DROP
                    });

                    (function(marker, data) {

                        google.maps.event.addListener(marker, "click", function( e ) {
                            infoWindow.setContent(unternehmen);
                            infoWindow.open(map, marker);
                        });

                    })(marker, data);
            });
        }

</script>

【问题讨论】：

标签： javascript json google-maps google-maps-api-3 google-geocoder

【解决方案1】：

你已经正确地实现了闭包，但是在错误的地方

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

     var data = json[i],
     address = data.address,
     unternehmen = data.unternehmen;

    (function(unternehmen) {

        console.log(unternehmen);

            geocoder.geocode( { 'address' : address }, function( results ) {

                var marker = new google.maps.Marker( {
                    map: map,
                    position: results[0].geometry.location,
                    title: unternehmen,
                    animation: google.maps.Animation.DROP
                });

                //(function(marker, data) {

                    google.maps.event.addListener(marker, "click", function( e ) {
                        infoWindow.setContent(unternehmen);
                        infoWindow.open(map, marker);
                    });

                //})(marker, data);
            });


     })(unternehmen);

}

【讨论】：