标记数组 - 将数组中保存的信息传递给 InfoBox

Question

我有一组显示良好的标记。我遇到的问题是为每个使用数组中保存的内容显示一个信息框。该数组称为 store_pins，元素 4 和 5 包含要传递给信息框的值（元素 4 包含图像的文件名，元素 5 包含图像的标题）。信息框代码将

单击标记时需要调用信息框，它应该位于我的代码底部，我有注释 // 信息框代码在此处。

我的完整代码如下：

    var map;
    var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";


    google.maps.event.addDomListener(window, 'load', initialize);
    
    function initialize() {
        var map_center  = new google.maps.LatLng(55.144178,-2.254122);
        var store_pins  = new Array();
        var pin_marker  = new Array();
        var pin_info    = new Array();
        var pin_infoop  = new Array();
        
        store_pins = [
            ['Bellingham Co-Op', 55.144178, -2.254122,'pin','bellinghamcoop.jpg','Staff at Bellingham Co-Op'],
            ['Leicester Tigers - Kingston Park', 55.018754, -1.672230,'rugby','kingparktigers.jpg','Stu with the Leicester Tigers Rugby Team'],
            ['The Hawick PSA Team', 55.421825, -2.797123,'rugby','hawickpsa.jpg','The Hawick PSA Team']
        ];

    var myOptions = {
        zoom: 3,
        minZoom: 3,
        center: map_center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
        map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
    
        // Main Loop
        
        
        for(i=0;i<store_pins.length;i++)
        {
        var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
        var pinIcon = {
            url: 'icons/shirtpin.png',
            //The size image file.
            size: new google.maps.Size(50, 55),
            //The point on the image to measure the anchor from. 0, 0 is the top left.
            origin: new google.maps.Point(0, 0),
            //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
            anchor: new google.maps.Point(25, 20)
        };
        var pinShape = {
            coord: [0,0,50,55],
            type: 'rect'
        };

        pin_marker[i] = new google.maps.Marker(
        {
                position:       pos,
                map:            map,
                title:          store_pins[i][0],
                icon:           pinIcon,
                shape:          pinShape,
                zIndex:         107
           } 
        );
            
        pin_infoop[i] = {
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-241, 0),
                zIndex: null,
                boxStyle: { 
                background: "url('infobox/pop_up_box_top_arrow.png') no-repeat",
                opacity: 1,
                width: "430px"
                },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "icons/button_close.png",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false,
                content:   store_pins[i][5]
        };

        pin_info[i] = new InfoBox(pin_infoop[i]);

            
            
        google.maps.event.addListener(pin_marker[i], 'click', function() {
            map.panTo(this.position);
            map.setZoom(10);
            pin_info[i].open(map, this);
        });
} 
};

Answer 1

你的代码出现 javascript 错误：

Uncaught TypeError: Cannot read property 'open' of undefined

这一行：

pin_info[i].open(map, this);

i=3 并且 pin_info 的最高可用索引是 2.

您的问题是在循环中定义 infowindows/boxes 的常见问题。已在 this question 中使用匿名函数闭包解决：

改变这个：

    google.maps.event.addListener(pin_marker[i], 'click', function() {
        map.panTo(this.position);
        map.setZoom(10);
        pin_info[i].open(map, this);
    });

收件人：

    google.maps.event.addListener(pin_marker[i], 'click', (function(marker, i) {
    return function() {
        map.panTo(this.position);
        map.setZoom(10);
        pin_info[i].open(map, this);
    }
  })(pin_marker[i], i));

proof of concept fiddle（必须更改信息框的图标和一些属性，这样我才能看到发生了什么，因为您的代码无法正常工作）

标记数组 - 将数组中保存的信息传递给 InfoBox

Array of Markers - Passing info held in array to InfoBox

arrays

api

google-maps

markers

infobox