切換地圖標記

-1

我想知道是否有人能夠幫助我。切換地圖標記

我試圖把一些代碼放在一起，我可以將標記從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>

來源

2011-09-21 IRHM

看起來你需要有一些實際調用您的boxclick功能。

來源

2011-09-21 16:37:59 duncan

嗨，我已經回到演示，並做了一些更改，我已經添加到我原來的職位。但是我得到了一個經常性的錯誤：'line 41'處預期的對象，它是line：downloadUrl（「loadpublicfinds.php」，function（data）{ 然後當我點擊複選框時，我收到錯誤'findcategory is undefined' 。親切的問候。克里斯 – IRHM

切換地圖標記

回答

相關問題