Google은 V3 맞춤 마커 이미지와 fitBounds()를 매핑합니다.

마커 자체에지도의 경계를 맞추기 위해 fitBounds() 메소드를 사용한 후에 맞춤 마커를 내지도에 표시하려고합니다.Google은 V3 맞춤 마커 이미지와 fitBounds()를 매핑합니다.

마커 배열을 반복 한 다음지도의 경계를 확장하여 마커 좌표가 통합되도록했습니다.

이것은 주식 Google지도 아이콘으로 잘 작동합니다. 그러나 고객은 사이트에 대해 상당히 큰 (36 x 57 픽셀) 마커 이미지를 사용하려고합니다. 지도의 경계를 맞추면 어떻게 보상합니까?

현재 사용자 정의 마커 이미지를 사용할 때 모든 경계가 설정된 경계 안에 들어 가지 않습니다.

2012-05-20 RyanP13

싼 대답은 항상 fitBounds() 후에 한 수준을 축소하는 것입니다. 그러나 우리는 조금 더 잘할 수 있습니다.

나는 해킹을 좋아한다. 여기서 나는 마커의 크기가 결코 36x57보다 크지 않다는 가정을하고 있습니다. 나는 잠시 후에 fitBounds()이 가장자리와 가장 가까운 마커 (아마도 휴대 전화가 아님) 사이에 약 42 픽셀의 여백을 남기고, 마커의 위치를 변경하지 않는다고 가정합니다. 즉, 항상있을 것입니다. 주어진 좌표 위치 위에 표시됩니다. 아이콘이 다른면으로 흘러 나오면 조정이 필요합니다.

내 해킹은 LatLng의 픽셀 위치를 측정하는 함수를 사용합니다 (컨테이너 버전을 사용하면 div 버전이 바운드 변경 사항으로 인해 신뢰할 수 없다는 것을 알았습니다).

우리는 아이콘의 높이를 알고 있고 가장 위의 표식이 어디에 있는지 알 수 있기 때문에 화면이 꺼져있는 것으로 판단되면지도를 조금 남쪽으로 패닝 할 수 있습니다. 아래에 충분한 여백이없는 경우 유일한 옵션은 축소하는 것입니다. 필자의 유일한 관심사는 fitBounds와 사용자 정의 패닝/확대/축소의 두 가지 이벤트를 요구하기 때문에 불규칙적 일 것입니다. 유일한 대답은 사용자 정의 fitBounds를 다시 작성하는 것입니다. 수동으로 테스트했을 때 이벤트가 원활하게 실행되었습니다. 고양이 아이콘을 추가 할 수

http://jsfiddle.net/sZJjY/

클릭, 크기 조정/패닝을 트리거 마우스 오른쪽 단추로 클릭합니다.

예 : 3-4 새끼 고양이를 배치하고 마우스 오른쪽 버튼을 클릭 한 다음 의도적으로 상단에서 벗어난 다른 새끼를 놓고 마우스 오른쪽 버튼을 다시 클릭하십시오.

function fitIcons() { 
    var left = 180.0; 
    var right = -180.0; 
    var top = -90.0; 
    var bottom = 90.0; 

    for (var i = 0; i < markers.length; i++) { 
     curlat = markers[i].getPosition().lat(); 
     curlng = markers[i].getPosition().lng(); 
     if(curlat > top) { top = curlat; } 
     if(curlat < bottom) { bottom = curlat; } 
     if(curlng > right) { right = curlng; } 
     if(curlng < left) { left = curlng; } 
    } 

    var overlay = new google.maps.OverlayView(); 
    overlay.draw = function() {}; 
    overlay.setMap(map); 

    map.fitBounds(new google.maps.LatLngBounds(
     new google.maps.LatLng(bottom, left), 
     new google.maps.LatLng(top, right))); 

    topPixels = overlay.getProjection().fromLatLngToContainerPixel(
        new google.maps.LatLng(top, right)); 

    bottomPixels = overlay.getProjection().fromLatLngToContainerPixel(
        new google.maps.LatLng(bottom, left)); 

    topGap = topPixels.y; 
    bottomGap = $("#map_canvas").height() - bottomPixels.y; 

    if(topGap < iconHeight) { 
     if(bottomGap > iconHeight) { 
     map.panBy(0, topGap); 
     } 
     else { 
     map.setZoom(map.getZoom() - 1); 
     } 
    } 
    }

출처

2012-05-20 19:49:18

이미 경계를 계산 했으므로 큰 이미지를 포함하기에 충분한 버퍼 영역을 추가하기 위해 경계를 확장하면됩니다. 이런 식으로 범위를 계산하거나 확장하는 데 사용할 수있는 수식을 convex hull이라고합니다. Computational Geometry Algorithms Library에는 2D Convex Hull Algorithms에 대한 섹션이 있거나 JavaScript Quickhull Article이 있으며 페이지 하단 근처에 멋진 온라인 예제가 포함되어 있습니다. 희망이 도움이된다 -

출처

2012-05-20 19:07:17

Google은 V3 맞춤 마커 이미지와 fitBounds()를 매핑합니다.

답변

관련 문제