Question

我想知道是否有人可以帮助我。

我正在尝试将一些代码放在一起，我可以将mySQL数据库中的标记加载到我的地图上，标记分为四类。

如果可能的话，我想做的是通过我在表单上设置的复选框切换显示或隐藏的标记。

我可以让代码工作，它可以提取标记数据并在我的地图上绘制它们，但我很难获得允许标记显示或隐藏的部分。我使用this作为起点，但我显然不能正确理解这个例子。

我只是想知道是否有人可以看看这个请让我知道我哪里出错了。

非常感谢和亲切的问候

克里斯

<!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 - Public Finds</title>
        <link rel="stylesheet" href="css/publicfinds.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"> 
            var customIcons = {
            "Artefact": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Coin": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Jewellery": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Precious Metal": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.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: 'terrain' 
            }); 

            var infoWindow = new google.maps.InfoWindow;

            // 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 findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);
            bindInfoWindow(marker, map, infoWindow, html);
            } 
            }); 
            } 


      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<markers.length; i++) {
          if (markers[i].mycategory == findcategory) {
           markers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<markers.length; i++) {
          if (markers[i].mycategory == findcategory) {
            markers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(findcategory+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box, findcategory) {
        if (box.checked) {
          show(findcategory);
        } else {
          hide(findcategory);
        }


            function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.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()">
                <p>&nbsp;</p>
                <form id="Public Finds" method="post" action="">
                  <p align="left">
                    <input name="artefact" type="checkbox" id="artefact" value="checkbox" />
Artefact </p>
                  <p align="left">
                    <input name="coin" type="checkbox" id="coin" value="checkbox" />
Coin</p>
                  <p align="left">
                    <input name="jewellery" type="checkbox" id="jewellery" value="checkbox" />
                  Jewellery</p>
                  <p align="left">
                    <input name="preciousmetal" type="checkbox" id="preciousmetal" value="checkbox" />
                  Precious Metal</p>
                </form>
                <p>&nbsp;</p>
                <div id="map"></div>
            </body> 
</html>

更新代码

<!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 - Public Finds</title>
        <link rel="stylesheet" href="css/publicfinds.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"> 
            var customIcons = {
            "Artefact": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Coin": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Jewellery": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Precious Metal": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            var gmarkers = [];

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

            var infoWindow = new google.maps.InfoWindow;

            // 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 findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            marker.mycategory = findcategory;
            bounds.extend(point);
            map.fitBounds(bounds);
            bindInfoWindow(marker, map, infoWindow, html);
            } 
            }); 
            } 


              // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(findcategory) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == findcategory) {
            gmarkers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(findcategory+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == findcategory) {
            gmarkers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(findcategory+"box").checked = false;
      }

      // == a checkbox has been clicked ==
      function boxclick(box,findcategory) {
        if (box.checked) {
          show(findcategory);
        } else {
          hide(findcategory);
        }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

    // == show or hide the categories initially ==
        hide("artefact");
        hide("coin");
        hide("jewellery");
        hide("precious_metal");

            function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.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()">
                <p>&nbsp;</p>
      <form action="#">
      Artefact: <input type="checkbox" id="artefactbox" onclick="boxclick(this,'artefact')" /> &nbsp;&nbsp;
      Coin: <input type="checkbox" id="coinbox" onclick="boxclick(this,'coin')" /> &nbsp;&nbsp;
      Jewellery: <input type="checkbox" id="jewellerybox" onclick="boxclick(this,'jewellery')" /> &nbsp;&nbsp;
      Precious Metal: <input type="checkbox" id="preciousmetalbox" onclick="boxclick(this,'preciousmetal')" /><br />
    </form>  
                <p>&nbsp;</p>
                <div id="map"></div>
            </body> 
</html>

Answer 1

看起来您需要拥有实际调用boxclick功能的内容。

切换地图标记

1 个答案: