为每个标记谷歌地图设置内容答案

【问题标题】：Setting the content for each marker Google Maps为每个标记谷歌地图设置内容
【发布时间】：2014-11-21 19:11:11
【问题描述】：

在为我正在创建的每个标记设置内容方面需要快速帮助

我正在遍历我的 Locations Obj，其中包含每个标记 (locationObj) 的 Lat、Lng，每个标记的内容由其他对象（PermutationObj）持有。

示例：

 locationObj-- > {"Lat":"34.163291","Lng":"-118.685123"} etc....

 PermutationObj -- > ElectronicPopContent,LocationName

问题是我正在为我在地图上显示的所有标记获取来自 PermutationObj 的第一个内容和位置名称。

我该如何解决？？？

JS代码：

var locationObj;
        var PermutationObj;
        var map;
        var mapOptions;

        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
        };





      function setMap(locationList, permutation) {
            // List of Lat,Lng
            locationObj = $.parseJSON(locationList);
            PermutationObj = $.parseJSON(permutation);


            var qMapTypeId = google.maps.MapTypeId.SATELLITE
            var LatLngCenter = new google.maps.LatLng(34.163291, -118.685123);
            var mapOptions = {
                zoom: 4,
                center: LatLngCenter,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                }
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var bounds = new google.maps.LatLngBounds();
            for (i in locationObj) {
                var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);

                bounds.extend(LatLngPair);
                map.fitBounds(bounds);


//                for (j in PermutationObj) {
//                    //  var image = PropObj[j]["ElectroincImageURL"];
//                    var content = PermutationObj[j]["ElectronicPopContent"];
//                    break
//                }

                var content = PermutationObj[i]["ElectronicPopContent"];

                marker = new google.maps.Marker({
                    position: LatLngPair,
                    map: map,
                    draggable: false,
                    //                    icon: image,
                    shape: shape,
                    anchorPoint: new google.maps.Point(12, -25)

                });

                //Setting up the content of the info window dynamic wise.
                var infowindow = new google.maps.InfoWindow({
                    content: content
                });



                //Setting up an event listener, When the user clicks the marker, an info window opens.
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                });
            }
        }

【问题讨论】：

我认为，如果您修复代码的缩进，您会更快地发现问题
我认为问题应该出在第二个循环上，但我不确定是否需要第二只眼睛才能看到它
另外，如何为每个标记创建点击事件？！？！
而不是第二个循环使用var content = PermutationObj[i]["ElectronicPopContent"];，看看它是否有效
我像你说的那样修改了我的代码，现在它只给了我对象中的第一个内容，尽管我正在做一个 for 循环。顺便说一句，我怎样才能使所有标记都可以点击，而不仅仅是一个？

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

【解决方案1】：

更改了一些内容，第一个是只有一个 InfoWindow 实例，另一个是将内容存储为标记属性并在单击时使用它，最后一个是每个标记都有一个实例，而是使用 var marker = ...的marker = ... 让我知道这是否适合您。

var locationObj;
var PermutationObj;
var map;
var mapOptions;
var infowindow = new google.maps.InfoWindow({ });

var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
};

function setMap(locationList, permutation) {
    // List of Lat,Lng
    locationObj = $.parseJSON(locationList);
    PermutationObj = $.parseJSON(permutation);


    var qMapTypeId = google.maps.MapTypeId.SATELLITE
    var LatLngCenter = new google.maps.LatLng(34.163291, -118.685123);
    var mapOptions = {
            zoom: 4,
            center: LatLngCenter,
            mapTypeControl: true,
            mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var bounds = new google.maps.LatLngBounds();
    for (i in locationObj) {
        var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);

        //Are you sure you need these 2 lines here?
        bounds.extend(LatLngPair);
        map.fitBounds(bounds);

        var marker = new google.maps.Marker({
            position: LatLngPair,
            map: map,
            draggable: false,
            shape: shape,
            anchorPoint: new google.maps.Point(12, -25),
            infoWindowContent: PermutationObj[i]["ElectronicPopContent"]

        });

        //Setting up an event listener, When the user clicks the marker, an info window opens.
        google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(marker.infoWindowContent);
                infowindow.open(map, marker);
        });
    }
}

【讨论】：