Question

我一直在努力为我的一个网页实现InfoBox代码，通过一些很棒的学费，我已经能够做到这一点。现在，我可以在表单加载时让框显示每个标记，但我真的希望它能够在表单加载时显示没有框，然后，当用户点击时标记A'，信息框出现，地图平移，使标记点击地图的中心，与信息窗口的方式相同。

然后，如果用户点击“标记B”，原始InfoBox将移动到新单击的标记，再次平移并将地图居中到该标记。

我查看了Google网站上的所有文档，但我找不到如何执行此操作。我只是想知道是否有人可能会让我热衷于这样做。请在下面找到我的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript" src="js/infobox.js"></script>
        <script type="text/javascript"> 
            var customIcons = {
            0: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            1: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'roadmap' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker");
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markers.length; i++) { 
            var locationname = markers[i].getAttribute("locationname"); 
            var address = markers[i].getAttribute("address");
            var totalfinds = markers[i].getAttribute("totalfinds");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("osgb36lat")), 
            parseFloat(markers[i].getAttribute("osgb36lon")));
            var html = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";
            var icon = {}; 
            if (totalfinds == 0) {   
            icon = customIcons[0]; 
            } else if (totalfinds >= 1) {   
            icon = customIcons[1];      
            } 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: address,
            icon: icon.icon,
            shadow: icon.shadow
            }); 

            var boxText = document.createElement("div");

            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";        
            boxText.innerHTML =  locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";

            var myOptions = {
            content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
            background: "url('tipbox.gif') no-repeat"
            ,opacity: 0.75
            ,width: "280px"
            }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
            };

START OF EDIT

    bounds.extend(point);
    map.fitBounds(bounds);
    var infoBox = new InfoBox(myOptions);
    google.maps.event.addListener(marker, 'click', function() {
    infoBox.open(map, this); 
    map.setCenter(this.position;
    });
    } 
    }); 
    }

END OF EDIT

            function downloadUrl(url, callback) { 
            var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 


            request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
            } 
            }; 

            request.open('GET', url, true); 
            request.send(null); 
            } 

            function doNothing() {} 

            </script> 
            </head>    
            <body onLoad="load()">
                <div id="map"></div>
            </body> 
            </html>

Answer 1

我从未使用过infoBox，但我认为它与标准信息窗口非常相似。您需要使用Events将点击操作添加到将打开信息框并使地图居中的标记。

类似的东西：

//register the single left click event.
google.maps.event.addListener(marker, "click", function (event) {

    //you may have to create a another box here or just change the content
    //Google's standard info window only creates one instance and then you change
    //the content during this event i.e. infoWindow.setContent("some html");

    infoBox.open(map, this);
    map.setCenter(this.position);
});

更新回答：

好的，看起来你在循环的每次迭代都覆盖了infoBox，所以剩下要展示的唯一一个就是创建的最后一个。您可以在循环外部构建一个infoBox，但不要设置content属性，然后在侦听器内部设置内容。

您需要将内容存储在其他位置，以防止它被覆盖。尝试在标记中设置内容并像这样引用它

var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";        
    boxText.innerHTML =  locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";

var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: address,
            icon: icon.icon,
            shadow: icon.shadow,
            html: boxText 
            });

google.maps.event.addListener(marker, "click", function (event) {
    infoBox.setContent(this.html);
    infoBox.open(map, this);
    map.setCenter(this.position);
});

InfoBox与InfoWindow行为

1 个答案: