可检查的JavaScript表显示谷歌地图标记

我想找到一个显示一个表的JavaScript，每一行都是一个地址。如果选中某行，则应在Google地图下方显示一个标记。可检查的JavaScript表显示谷歌地图标记

什么建议吗？

2010-10-18 Mermoz

这是一个脚本，用于根据地址在表格中使用复选框切换标记。我使用jQuery进行表单交互。这个脚本只有当用户点击首次标记发送一个地址解析请求..

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> 
     </script> 
     <script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false"> 
     </script> 
     <script> 
      var geocoder; 
      var map; 
      markers = []; 
      function initialize(){ 
       geocoder = new google.maps.Geocoder(); 
       var latlng = new google.maps.LatLng(-34.397, 150.644); 
       var myOptions = { 
        zoom: 8, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      } 

      function codeAddress(address){ 
       //check if this marker is already in array 
       geocoder.geocode({ 
        'address': address 
       }, function(results, status){ 
        if (status == google.maps.GeocoderStatus.OK) { 
         map.setCenter(results[0].geometry.location); 
         var marker = new google.maps.Marker({ 
          map: map, 
          position: results[0].geometry.location 
         }); 
         //keep track of your markers, i am using address here as an ID but anything else can be used such as element id 
         markers.push({ 
          id: address, 
          marker: marker 
         }) 
        } 
        else { 
         alert("Geocode was not successful for the following reason: " + status); 
        } 
       }); 
      } 

      function isGeocoded(address){ 
       //check if marker is in marker array 
       index = inArray(address) 
       if (index >= 0) { 
        m = markers[index].marker 
        //is marker visible ? 
        if (m.getMap() === null) { 
         m.setMap(map) 
         //pan map to the toggled marker 
         map.panTo(m.position) 
        } 
        else { 
         //toggle marker 
         m.setMap(null); 
        } 


       } 
       else { 
        codeAddress(address); 
       } 
      } 

      function inArray(address){ 
       for (i = 0; i < markers.length; i++) { 
        if (markers[i].id == address) { 
         return i 
        } 
       } 

      } 

      $(document).ready(function(){ 
       $("table .ch").change(function(){ 

        isGeocoded($(this).val()); 

       }) 

      }) 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="width: 320px; height: 480px;"> 
     </div> 
     <div> 
      <table> 
       <tr> 
        <td> 
         <input type="checkbox" class="ch" value="Sydney, NSW"> 
        </td> 
        <td> 
         Sydney, NSW 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" class="ch" value="40 Devon St, Christchurch, New Zealand"> 
        </td> 
        <td> 
         40 Devon St, Christchurch, New Zealand 
        </td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

来源

2010-10-18 20:52:09 Michal

当我嵌入这在我的网站，我总是得到一个错误，指出“$（”表·CH“）”是空的。是因为你必须把所有的div都放到$“（”＃cRight> etc“中吗？ – Mermoz 2010-10-19 14:26:12

你可以发布一个链接到你的实现吗？ – Michal 2010-10-19 15:44:45

其实$（）只会提升错误”为空“使用Prototype 1.5库... – Mermoz 2010-10-20 10:53:15

可检查的JavaScript表显示谷歌地图标记

回答

相关问题