Google maps V3 пользовательские изображения маркеров и fitBounds()

Question

Я пытаюсь получить свои пользовательские маркеры, чтобы отображаться на моей карте после того, как я использовал метод fitBounds(), чтобы соответствовать границам карты самим маркерам.

Я сделал это, перейдя по массиву маркеров, а затем расширив границы карты, чтобы включить координаты маркера.

Это прекрасно работает с маркерами карт google. Тем не менее, мой клиент хочет использовать довольно большие (36px на 57px) изображения маркеров для своего сайта. Как мне компенсировать это при установке границ карты?

В данный момент, когда пользовательские изображения маркеров не соответствуют всем установленным границам.

Answer 1

Дешевый ответ - всегда уменьшать масштаб на один уровень после fitBounds(). Но мы можем сделать немного лучше.

Мне нравится писать хаки. Здесь я делаю предположение, что размер вашего маркера никогда не будет больше 36х57. Я проверил некоторое время назад, обнаружив, что 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); 
     } 
    } 
    } 

Answer 2

Поскольку вы уже рассчитали границы, вам просто нужно расширить границы, чтобы добавить достаточную область буфера для включения больших изображений. Формула, которую вы можете использовать для вычисления или расширения границ таким образом, называется выпуклой оболочкой; Computational Geometry Algorithms Library имеет раздел на 2D Convex Hull Algorithms или есть JavaScript Quickhull Article, который также включает отличный пример онлайн в нижней части страницы. Надеюсь, это полезно -