Google지도 api 폴리곤 리스너 토글

그래서지도에 두 개의 다각형 층이 있습니다. 이 다각형은 줌 레벨에 따라 다릅니다.Google지도 api 폴리곤 리스너 토글

첫 번째 레벨의 폴리곤을 숨기거나 청취자를 제거하여 투명하게 만들고 싶을 때 축소하면 레벨 2의 폴리곤을 숨기고 첫 번째 레벨의 폴리곤을 표시해야합니다.

현재 나의 전략은 폴리곤을 처음에는 투명하게 만드는 것이며, 리스너는 필요할 때 불투명하게 만듭니다. 폴리곤 토글을 수행하기 위해 확대/축소가 변경되면 리스너를 추가하고 제거합니다.

그래서 나는 level1 폴리곤 배열과 level2 폴리곤 배열을 가지고 있지만 그것들을 토글하는 것처럼 보이지 않습니다.

어떻게 작동하지 않습니까? addListener는 removeListener와 정반대로 수행하면 안됩니까?

function zoomedout(map) { 

$.each(level2Listeners, function(k,v) { 
    google.maps.event.removeListener(v); 
}); 



$.each(level1Listeners, function(k,v) { 
    google.maps.event.addListener(v); 
});

}

은 토글을 달성하기 위해 다른 더 합리적인 전략이 있습니까?

출처

2013-07-02 Ayrad

. 청취자를 추가하고 제거하는 대신 영구적으로 연결된 'zoom_changed'리스너 하나를 사용하는 것이 좋습니다.이 리스너는 새로운 줌 레벨에 따라 레이어를 표시하거나 숨 깁니다. 이걸 마음 속으로 가져 가면 코드는 사소한 것이어야합니다. –

레이어를 구현하는 가장 간단한 방법은지도 zoom_changed 리스너의 배열을 반복하고 다각형의 "지도"속성을 적절히 설정하는 것입니다. 아래의 코드는 google.maps.Map 객체가 "지도"이고 전역 (또는 적어도 리스너의 범위에서 사용 가능) 인 것으로 가정합니다.

google.maps.event.addListener(map, "zoom_changed", function() { 
    if (map.getZoom() > zoomThreshold) { 
     for (var i = 0; i<level1polys.length; i++) { 
     // hide the level1 polygons 
     if (level1polys[i].getMap() != null) level1polys[i].setMap(null); 
     } 
     for (var i=0; i<level2polys.length; i++) { 
     // show the level2 polygons 
     if (level2polys[i].getMap() == null) level2polys[i].setMap(map); 
     } 
    else { 
     for (var i = 0; i<level1polys.length; i++) { 
     // show the level1 polygons 
     if (level1polys[i].getMap() == null) level1polys[i].setMap(map); 
     } 
     for (var i=0; i<level2polys.length; i++) { 
     // hide the level2 polygons 
     if (level2polys[i].getMap() != null) level2polys[i].setMap(null); 
     } 
    } 
});

당신은 당신은 단지 일을 줌 레벨의 각 변경에 대한 모든 폴리곤을 처리 할 필요가 없습니다 상태를 추가 할 수 임계 값을 가로 질러 줌 변경하는 경우.

출처

2013-07-02 12:57:25 geocodezip

또 다른 합리적인 접근법을 요청했습니다. 몇 달 전 비슷한 작업이 있었고 (줌에 따라 약 5000 개의 오버레이를 토글 함) 다른 해결책을 찾았습니다.

다각형은 MVCObject입니다. MVCObject의 속성을 다른 MVCObject의 속성에 바인딩 할 수 있습니다.

Map-Instance (MVCObject이기도 함)의 새 속성을 만들고 zoom_changed-event에서 이러한 속성을 업데이트했습니다.

워크 플로 :

//this polygon will only be displayed at a zoom up to 5 
somePolygon.bindTo('map',map,'prop1');

을 트리거 zoom_changed :

원하는 속성 ZOOM_CHANGED

google.maps.event.addListener(map,'zoom_changed',function(){ 

    var z=this.getZoom(); 

    //set map.prop1 to Map-instance when zoom<=5,otherwise to null 
    var p1=(z<=5)?this:null;if(this.get('prop1')!==p1){this.set('prop1',p1);} 

    //set map.prop2 to Map-instance when zoom>5,otherwise to null 
    var p2=(z>5)?this:null;if(this.get('prop2')!==p2){this.set('prop2',p2);} 
});

바인딩에 오버레이의 맵 속성의 속성을 설정 -event 속성을 초기화합니다.
```
google.maps.event.trigger(map, 'zoom_changed');
```

4 원 간단한 데모 : 당신은 잘못된 방법으로 이것에 대해 생각하고 http://jsfiddle.net/doktormolle/FPvLx/

출처

2013-07-03 00:51:15

Google지도 api 폴리곤 리스너 토글

답변

관련 문제