使用 InfoBox 映射标记数组

Question

我正在用这个把头发拉出来。我的总体目标是显示一个信息框，它从名为 store_pins 的标记数组中获取信息。

出于测试目的，我只是在单击其中一个地图标记时显示警报，该标记应显示数组中的第 5 项。最终我会显示一个包含图像和文本的信息框。

我的代码底部有一个监听器，当点击标记时它会工作。问题是我的数组中的信息没有被传递，而不是显示文本，我得到的只是警报中显示的 [object Object]。

任何关于我哪里出错的线索都将不胜感激。

<script type="text/javascript">

    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();

        
        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'] // REMEMBER NO COMMA ON LAST ENTRY!!!
        ];

    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
           } 
        );

        descr = store_pins[i][5];
            
        // Popup Box
            google.maps.event.addListener(pin_marker[i], 'click', function(descr) {
                alert(descr);
            });
            
        // Popup Box End
            
} 
};
</script>

Answer 1

当您调用alert(descr) 时，它会尝试打印对象本身而不是您想要的信息。您应该将descr = store_pins[i][5]; 移动到您的 pin_marker[i] 选项块中：

pin_marker[i] = new google.maps.Marker(
            {
                position:   pos,
                map:        map,
                title:      store_pins[i][0],
                icon:       pinIcon,
                shape:      pinShape,
                zIndex:     107
                descr: store_pins[i][5] //add it here
           } 
        );

然后，在你的 onclick 监听器中，你可以打印出这样的信息：

        google.maps.event.addListener(pin_marker[i], 'click', function() {
            alert(this.descr);
        });