1

我已经设法在我的一张地图上实现了“信息框”，该地图加载了保存在 mySQL 数据库中的位置，但我想对此进行一些更改，但我不确定如何。

我正在使用的代码如下，但我希望能够替换信息框的“默认”行为，即在地图加载时出现在每个标记旁边，信息框仅在标记出现时出现被点击，平移以使地图在该标记上居中。然后，当单击下一个标记时，信息框从第一个标记移动到新单击的标记，再次具有平移和居中功能。

<!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>Map My Finds - 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("loadalllocations.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 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
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);

            var boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: orange; 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.50
            ,width: "180px"
            }
            ,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
            };
            var ib = new InfoBox(myOptions);
            ib.open(map, marker);

            } 
            }); 
            } 

            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>

我还想了解更多关于信息框的信息，比如更改颜色、边距等，但我只在http://google-maps-utility-library-v3.googlecode 找到了指导。 com/svn/tags/infobox/1.1.5/docs/reference.html没有我希望的那么详细。还有其他地方我可以去获取更详细的信息吗？

现在已解决此问题，并且代码正在运行。

4

1 回答 1

1

试试这个信息窗口的示例代码

这里还有许多其他示例用于其他功能

您可能正在寻找的细节是

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
    'south west of the nearest large town, Alice Springs; 450&#160;km '+
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
    '(last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

//create info window with a specific content string
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

//marker listener
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});
于 2011-09-01T15:41:01.020 回答