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

Question

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

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

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

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

Answer 1

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

Изображение с сеткой 63 x 63 png. (Изображения/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's, чтобы сохранить сетку сверху.

Затем мы добавляем обработчик события, который вызывается при запуске карты bounds_changed.

google.maps.event.addListener(main_map, 'bounds_changed', centerReticle); 

и, наконец, у нас есть функция 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());}); 

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

Спасибо.

Пропустить

Answer 2

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

Вместо удалить вопрос, вот решение в случае, если это помогает кто-то еще:

<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; 
} 

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

Answer 3

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

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

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