Google지도 마커를 카테고리 또는 그룹별로 숨기거나 표시합니다.

마커 그룹을 보여줄 수있는 Google지도를 만드는 중입니다. 한 지역의 모든 레스토랑이나 공원을 말하십시오. 현재 나는 일련의 레스토랑과 일련의 공원을 만들 수있었습니다. 각각의 공원에는 자체 마커 색상이 있습니다. 지도 아래의 텍스트를 클릭하여 모든 마커를 숨기거나 표시 할 수도 있습니다. 하지만 이제 마커를 범주로 분리하여 확인란을 기반으로 숨기거나 표시 할 수 있습니다. 아래의 코드는,하지만 여기에 내가 할 싶은 일이 있습니다 :Google지도 마커를 카테고리 또는 그룹별로 숨기거나 표시합니다.

지도는 내가 자신의 범주로 마커를 분리 숨기고 각을 표시 할 수 있습니다
기본적으로 어떤 마커 비어 있어야합니다 카테고리
여러 종류가 한 번 여기에

에 표시 할 수있는 것은 내 코드입니다

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></script> 
</head> 
<body> 
<div id="map" style="width: 100%; height: 650px;"></div> 
<p><a onClick="clearMarkers();">Clear Markers</a></p> 
<p><a onClick="showRestaurants();">Show Markers</a></p> 
<script type="text/javascript"> 
//Restaurants Markers 
var restaurants = [ 
    ['Melt Bar and Grill', 41.485345, -81.799047], 
    ['Sloane Pub', 41.486182, -81.824178], 
    ['Spitfire Salon', 41.479670, -81.768430], 
    ['Mahall\'s', 41.476989, -81.781094], 
    ['Szechwan Garden', 41.485615, -81.787890] 
]; 
//Parks Markers 
var parks = [ 
    ['Lakewood Park', 41.494457, -81.797605], 
    ['Madison Park', 41.476969, -81.781929], 
    ['Tuland Park', 41.464052, -81.788041] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 14, 
    center: new google.maps.LatLng(41.485345, -81.799047), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 

var marker, i; 
var markers = new Array(); 

//Create and Place Restaurant Markers 
for (i = 0; i < restaurants.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]), 
     map: map, 
     icon: 'images/markers/red_Marker.png' 
    }); 

    markers.push(marker); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(restaurants[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 

//Create and Place Parks Markers 
for (i = 0; i < parks.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(parks[i][1], parks[i][2]), 
     map: map, 
     icon: 'images/markers/blue_Marker.png' 
    }); 

    markers.push(marker); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(parks[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 
// Sets the map on all markers in the array. 
function setAllMap(map) { 
    for (var i = 0; i < markers.length; i++) { 
    markers[i].setMap(map); 
    } 
} 
// Removes the markers from the map, but keeps them in the array. 
function clearMarkers() { 
    setAllMap(null); 
} 
// Shows any markers currently in the array. 
function showRestaurants() { 
    setAllMap(map); 
} 
</script> 
</body> 
</html>

출처

2014-09-10 briazzi

"요구 사항"목록에 무엇이 효과가 있습니까? 작동하지 않는 것은 무엇입니까? [게시 된 코드의 바이올린] (http://jsfiddle.net/shh8ecxd/) – geocodezip

3 번 순간에 작업 중입니다. 공원과 식당을 모두 보여줄 수 있습니다. 나는 그들이 트리거되기 전까지는 기본 설정에 있지 않기를 원합니다.하지만 개별적으로 숨기고 표시하는 방법을 알지 못합니다. 지금은 나에게 무의미한 것입니다. – briazzi

google.maps.MVCObject은 이것을 구현하는 좋은 기능입니다.

대부분의 google.maps 클래스는 MVCObject를 만들고 마커도 MVCObject입니다.

장점 : 하나의 MVCObject 속성을 다른 MVCObject 속성에 바인딩 할 수 있습니다. 원본 개체에서 속성을 변경하면 대상 개체에서도 속성이 업데이트됩니다.

그래서 각 카테고리마다 MVCObject 만 필요합니다. MVCObject의 속성 (예 : map)을 google.maps.Map 또는 null으로 설정하고 map - 마커의 속성을 MVC 범위의 map 속성에 바인딩하면 완료됩니다.

모든 마커를 숨기거나 표시하려면 모든 category-MVCObjects의 map-property를 특정 값 (maps-instance 또는 null)으로 설정하십시오.

$(window).load(function(){ 

    var places={ 
    restaurant:{ 
     label:'restaurants', 
     //the category may be default-checked when you want to 
     //uncomment the next line 
     //checked:true, 
     icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.png' , 
     items: [ 
       ['Melt Bar and Grill', 41.485345, -81.799047], 
       ['Sloane Pub', 41.486182, -81.824178], 
       ['Spitfire Salon', 41.479670, -81.768430], 
       ['Mahall\'s', 41.476989, -81.781094], 
       ['Szechwan Garden', 41.485615, -81.787890] 
      ] 
    }, 
    park:{ 
     label:'parks', 
     //the category may be default-checked when you want to 
     //uncomment the next line 
     //checked:true, 
    icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png', 
     items: [ 
       ['Lakewood Park', 41.494457, -81.797605], 
       ['Madison Park', 41.476969, -81.781929], 
       ['Tuland Park', 41.464052, -81.788041] 
      ] 
    } 
    }, 
    map = new google.maps.Map(
       document.getElementById('map'), 
       { 
       zoom: 14, 
       center: new google.maps.LatLng(41.485345, -81.799047), 
       } 
      ), 
    infowindow = new google.maps.InfoWindow(), 

    // a div where we will place the buttons 
    ctrl=$('<div/>').css({background:'#fff', 
         border:'1px solid #000', 
         padding:'4px', 
         margin:'2px', 
         textAlign:'center' 
         }); 
    //show all-button 
    ctrl.append($('<input>',{type:'button',value:'show all'}) 
       .click(function(){ 
        $(this).parent().find('input[type="checkbox"]') 
        .prop('checked',true).trigger('change'); 
       })); 
    ctrl.append($('<br/>')); 

    //clear all-button 
    ctrl.append($('<input>',{type:'button',value:'clear all'}) 
       .click(function(){ 
        $(this).parent().find('input[type="checkbox"]') 
        .prop('checked',false).trigger('change'); 
       })); 
    ctrl.append($('<hr/>')); 

    //now loop over the categories 
    $.each(places,function(c,category){ 

    //a checkbox fo the category 
    var cat=$('<input>',{type:'checkbox'}).change(function(){ 
     $(this).data('goo').set('map',(this.checked)?map:null); 
    }) 
     //create a data-property with a google.maps.MVCObject 
     //this MVC-object will do all the show/hide for the category 
     .data('goo',new google.maps.MVCObject) 
     .prop('checked',!!category.checked) 

     //this will initialize the map-property of the MVCObject 
     .trigger('change') 

     //label for the checkbox 
     .appendTo($('<div/>').css({whiteSpace:'nowrap',textAlign:'left'}) 
     .appendTo(ctrl)) 
     .after(category.label); 

     //loop over the items(markers) 
     $.each(category.items,function(m,item){ 
     var marker=new google.maps.Marker({ 
       position:new google.maps.LatLng(item[1],item[2]), 
       title:item[0], 
       icon:category.icon 
       }); 

     //bind the map-property of the marker to the map-property 
     //of the MVCObject that has been stored as checkbox-data 
     marker.bindTo('map',cat.data('goo'),'map'); 
     google.maps.event.addListener(marker,'click',function(){ 
      infowindow.setContent(item[0]); 
      infowindow.open(map,this); 
     }); 
     }); 

    }); 

//use the buttons-div as map-control 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrl[0]); 
} 
);

샘플 - 구현 (I은 종래 마커의 표시를 제어하는 체크 박스가 생성 될 각 카테고리에 대해, 카테고리 구조 루프 간략화를 약간 수정 한)

데모 : http://jsfiddle.net/doktormolle/brepbvww/

출처

2014-09-10 19:32:22

위대한 나를 위해 완벽하게 작동! 무리 감사! – briazzi

Google지도 마커를 카테고리 또는 그룹별로 숨기거나 표시합니다.

답변

관련 문제