Вопрос по google-maps-api-3, google-maps, javascript – Google maps V3 пользовательские изображения маркеров и fitBounds ()

1

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

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

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

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

Ваш Ответ

2   ответа
3

вам может потребоваться просто расширить границы, чтобы добавить достаточную область буфера для включения больших изображений. Формула, которую вы можете использовать для вычисления или расширения границ таким образом, называется выпуклой оболочкой;Библиотека алгоритмов вычислительной геометрии есть раздел на2D выпуклые алгоритмы Халла или естьJavaScript Quickhull Статья это также включает в себя отличный онлайн-пример в нижней части страницы. Надеюсь, что это полезно -

1

ds (). Но мы можем сделать немного лучше.

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

Похожие вопросы