自定义信息框

发布于 2024-12-02 06:40:33 字数 5043 浏览 0 评论 0原文

我已经设法在我的一张地图上实现“信息框”，该地图加载保存在 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 不太详细正如我所希望的那样。我还可以去其他地方获取更详细的信息吗？

现在这个问题已经解决并且代码可以工作了。

原文

I have managed to implement the 'Info Box' onto one of my maps which loads locations saved within a mySQL database, but I'd like to make a few changes to this but I'm not sure how.

The code that I am using is below, but I'd like to be able to replace the 'default' behaviour of the Info Box i.e. appearing next to each marker when the map loads, to, the Info Box only appearing once the marker has been clicked, panning to centre the map on that marker. Then when the next marker is clicked, the Info Box moving from the first to the newly clicked marker, again with the panning and centre functionality.

<!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>

I'd also like to learn a little more about the Info Box, in terms of changing the colour, margins etc, but I've only found the guidance at http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/reference.html which isn't quite as detailed as I would hope. Is there somewhere else that I can go to to get more detailed information?

This has now been resolved and the code is working.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ま昔日黯然 2024-12-09 06:40:33

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

此处提供其他功能的其他示例数量

您的具体信息可能正在寻找的是

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 km (208 mi) '+
    'south west of the nearest large town, Alice Springs; 450 km '+
    '(280 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);
});

Try this sample code for info windows

There's a number of other samples here for other functionalities

The specifics you're probably looking for are

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 km (208 mi) '+
    'south west of the nearest large town, Alice Springs; 450 km '+
    '(280 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);
});

回复收藏 0 原文

~没有更多了~