過濾谷歌地圖標記與複選框

Question

我想根據this V3 example篩選我的谷歌地圖標記從複選框。我的複選框HTML是：

<form action="#"> 
    Attractions: <input type="checkbox" id="attractionbox" onclick="boxclick(this,'attraction')" /> &nbsp;&nbsp; 
    Food and Drink: <input type="checkbox" id="foodbox" onclick="boxclick(this,'food')" /> &nbsp;&nbsp; 
    Hotels: <input type="checkbox" id="hotelbox" onclick="boxclick(this,'hotel')" /> &nbsp;&nbsp; 
    Towns/Cities: <input type="checkbox" id="citybox" onclick="boxclick(this,'city')" /><br /> 
</form> 

我的JavaScript是在下面。我似乎無法讓過濾器正常工作 - 目前，無論複選框的狀態如何，所有標記都會顯示在地圖上。我猜測我剛剛在錯誤的地方得到了一些變數，但迄今爲止我一直無法解決這個問題！任何幫助將非常感激。

var map; 
var infowindow; 
var image = []; 
var gmarkers = []; 

    image['attraction'] = 'http://google-maps-icons.googlecode.com/files/beach.png'; 
    image['food'] = 'http://google-maps-icons.googlecode.com/files/restaurant.png'; 
    image['hotel'] = 'http://google-maps-icons.googlecode.com/files/hotel.png'; 
    image['city'] = 'http://google-maps-icons.googlecode.com/files/smallcity.png'; 

function mapInit(){ 
    var centerCoord = new google.maps.LatLng(18.23, -66.39); 
    var mapOptions = { 
     zoom: 1, 
     center: centerCoord, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map"), mapOptions); 

    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
    }); 

    jQuery.getJSON("/places", function(json) { 
     if (json.length > 0) { 
     for (i=0; i<json.length; i++) { 
      var place = json[i]; 
      var category = json[i].tag; 
      addLocation(place,category); 
     } 
     } 
    }); 

    function addLocation(place,category) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(place.lat, place.lng), 
     map: map, 
     title: place.name, 
     icon: image[place.tag] 
     }); 

     marker.mycategory = category; 
     gmarkers.push(marker); 

     google.maps.event.addListener(marker, 'click', function() { 
     if (infowindow) infowindow.close(); 
     infowindow = new google.maps.InfoWindow({ 
      content: "<h3>"+ place.name +"</h3><p>" + place.tag +"</p><a href='/places/"+place.id+"'>Show more!</a>" 
     }); 
     infowindow.open(map, marker); 
     }); 
    } 

    function show(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
     if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(true); 
     } 
     } 
     document.getElementById(category+"box").checked = true; 
    } 

    function hide(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
     if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(false); 
     } 
     } 
     document.getElementById(category+"box").checked = false; 
     infowindow.close(); 
    } 

    function boxclick(box,category) { 
     if (box.checked) { 
     show(category); 
     } else { 
     hide(category); 
     } 
    } 
} 

jQuery(document).ready(function(){ 
    mapInit(); 
}); 

Answer 1

你的問題是，boxclick()功能的mapInit()功能的範圍內封閉的，因此boxclick()是不能從外部mapInit()訪問。你應該從你的HTML輸入字段刪除onclick事件，然後定義mapInit()函數內的事件處理程序如下：

function mapInit() { 

    // ... 

    $('#attractionbox').click(function() { 
    boxclick(this, 'attraction'); 
    }); 
}