Отображение перекрестия в центре JavaScript Google Map - PullRequest
Новая
       1

Отображение перекрестия в центре JavaScript Google Map

10 голосов
/ 09 ноября 2010

Я бы хотел отобразить перекрестье / сетку, которая зафиксирована в центре карты Google, точно так же, как Wikimapia.org . К сожалению, они используют v2 API, а я использую v3.

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

Нет опции CENTER для перечисления ControlPosition , поэтому я думаю, что любое решение будет немного хакерским.

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

Ответы [ 3 ]

10 голосов
/ 02 мая 2011

Данное решение не сработало для меня, потому что вышележащий div создает мертвую точку на карте.Лучшим решением для моего проекта с использованием JavaScript API Карт Google V3 было создание сетки на карте в виде маркера с прямоугольной формой в 1 пиксель.Затем используйте событие maps bounds_changed, чтобы перецентрировать маркер.

Изображение сетки имеет размер 63 x 63 png.(images / reticle.png)

Определение изображения и формы маркера ... 

  var reticleImage = new google.maps.MarkerImage(
    'images/reticle.png',            // marker image
    new google.maps.Size(63, 63),    // marker size
    new google.maps.Point(0,0),      // marker origin
    new google.maps.Point(32, 32));  // marker anchor point
  var reticleShape = {
    coords: [32,32,32,32],           // 1px
    type: 'rect'                     // rectangle
  };

После создания нашей карты (main_map) мы добавляем маркер ... 

  reticleMarker = new google.maps.Marker({
    position: latlng,
    map: main_map,
    icon: reticleImage, 
    shape: reticleShape,
    optimized: false,
    zIndex: 5
  });

Здесь var latlng - это тот же объект LatLng, который использовался для создания main_map.Значение zIndex должно быть больше, чем у любого другого маркера zIndex, чтобы прицельная сетка находилась сверху.

Затем мы добавляем обработчик события, который вызывается при срабатывании карты bounds_changed.наконец, у нас есть функция centerReticle (). 

  function centerReticle(){
    reticleMarker.setPosition(main_map.getCenter());
  }

Поскольку мы не делаем ничего с событием bounds_changed, мы можем привести в порядок код, передав анонимную функцию в вызов addListener ...Это избавляет нас от необходимости определять функцию centerReticle ().

  google.maps.event.addListener(main_map, 'bounds_changed',
      function(){reticleMarker.setPosition(main_map.getCenter());});

Это на самом деле работает довольно гладко.Надеюсь, это поможет другим.

Спасибо.

Пропустить

9 голосов
/ 09 ноября 2010

Хорошо, я дурак и делаю это сложнее, чем должно быть.

Вместо того, чтобы удалить вопрос, вот решение на случай, если оно поможет кому-то другому: 

<div id="container">
    <div id="map"></div>
    <div id="reticule"><img src="reticule.gif" /></div>
</div>

И некоторые стили: 

#container { position:relative; }
#map { height:100%; width:100%; }
#reticule {
    position:absolute;
    width:13px;
    height:13px;
    left:50%;
    top:50%;
    margin-top:-8px;
    margin-left:-8px;
    pointer-events: none;
}

Это не точный центр карты

6 голосов
/ 25 мая 2011

Я использую решение, найденное на DaftLogic.com .Похоже, что это в основном то же решение, что и BentFX, но гораздо более лаконичное. 

var marker = new google.maps.Marker({
    map: map,
    icon: '/images/reticle.png'
});
marker.bindTo('position', map, 'center');

К сожалению, оно также страдает от проблемы, замеченной Дрю, когда перекрестие не постоянно зафиксировано в центре карты.Если вы быстро перетаскиваете карту или увеличиваете и уменьшаете масштаб, вы увидите, что перекрестие немного смещается до тех пор, пока оно не будет перецентрировано.Если кто-нибудь придумает лучшее решение, сообщите нам.

...