토글 맵 마커

-1

누군가가 나를 도와 줄 수 있는지 궁금합니다.토글 맵 마커

나는 마커가 네 가지 범주 중 하나에 속하는 mymap 데이터베이스의 마커를지도에로드 할 수있는 몇 가지 코드를 함께 넣으려고합니다.

가능한 경우 내 양식에 설정 한 확인란의 표시 또는 숨김을 토글하는 것입니다.

마커 데이터를 가져 와서 내지도에 그려주는 코드를 얻을 수 있지만 마커를 표시하거나 숨길 수있는 섹션을 얻으려고 애 쓰고 있습니다. 나는 this을 시작점으로 사용했지만 예제를 올바르게 이해하지 못했습니다.

나는 누군가가 이걸 좀 들여다 볼 수 있는지 궁금해하고 내가 어디로 잘못 가고 있는지 알려주려고했다. 당신이 실제로 boxclick 함수를 호출하는 뭔가가 필요 같은

많은 감사와 안부

크리스

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

보인다.

출처

2011-09-21 16:37:59 duncan

안녕하세요, 저는 데모로 돌아가서 원래 게시물에 추가 한 몇 가지 변경 사항을 추가했습니다. 하지만 줄 41 '에서 예상되는 개체의 반복 오류가 발생합니다 : downloadUrl ("loadpublicfinds.php", function (data) { 다음 확인란을 클릭하면'findcategory is undefined '오류가 발생합니다. . 안부 전해. 크리스. – IRHM

토글 맵 마커

답변

관련 문제