当前位置： 文江博客话题详情

切换地图标记

发布于 2024-12-05 22:01:17 字数 12702 浏览 2 评论 0原文

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

我正在尝试将一些代码放在一起，以便可以将标记从 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>
原文

I wonder whether someone may be able to help me please.

I'm trying to put some code together where I can load markers from a mySQL database onto my map with the markers falling into one of four categories.

What I would like to do, if possible, is to toggle which markers are shown or hidden by way of check boxes which I've set up on my form.

I can get the code to work which pulls the marker data and plots them on my map but I'm struggling to get the section that allows the markers to be shown or hidden to work. I've used this as a starting point, but I've obviously not understood the example correctly.

I just wondered whether someone could possibly take a look at this please and let me know where I'm going wrong.

Many thanks and kind regards

Chris

<!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> </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> </p>
                <div id="map"></div>
            </body> 
</html>

UPDATED CODE

<!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> </p>
      <form action="#">
      Artefact: <input type="checkbox" id="artefactbox" onclick="boxclick(this,'artefact')" />   
      Coin: <input type="checkbox" id="coinbox" onclick="boxclick(this,'coin')" />   
      Jewellery: <input type="checkbox" id="jewellerybox" onclick="boxclick(this,'jewellery')" />   
      Precious Metal: <input type="checkbox" id="preciousmetalbox" onclick="boxclick(this,'preciousmetal')" /><br />
    </form>  
                <p> </p>
                <div id="map"></div>
            </body> 
</html>

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

扫码二维码加入Web技术交流群

发布评论

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

评论（1）

葬﹪忆之殇 2024-12-12 22:01:17

看起来您需要有一些东西可以真正调用您的 boxclick 函数。

Looks like you need to have something that actually calls your boxclick function.

回复 原文
~没有更多了~

关于作者

谎言

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

雪花的坚持

文章 0 评论 0

温柔一刀

文章 0 评论 0

扛起拖把扫天下

文章 0 评论 0

北方的韩爷

文章 0 评论 0

绝對不後悔。

文章 0 评论 0

青衫负雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文