Как создать наложение текста в Google Maps API v3, который не панорамируется?

Question

Я использую Google Maps API v3. Я хотел бы создать наложение текста на карте, которая не перемещается при панорамировании карты. Является ли лучший подход для управления элементами DOM, доступными из объекта MapPanes, или лучше создать пользовательский элемент управления, даже если он не будет выполнять ничего, кроме отображения текста?

Answer 1

Самый простой способ, который я нашел, сработал для меня, это несколько строк JavaScript, добавленных после того, как я создал новую карту.Итак, после этого:

map = new google.maps.Map('myMapDivId', mapOptions);

добавьте это:

var myTitle = document.createElement('h1');
myTitle.style.color = 'white';
myTitle.innerHTML = 'Hello World';
var myTextDiv = document.createElement('div');
myTextDiv.appendChild(myTitle);

map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(myTextDiv);

Возможно, вы захотите сделать так, чтобы текст выглядел лучше.

Альтернатива - поместитьdiv в вашем HTML:

<div id="myTextDiv" style="color: white; position: absolute;">
    <h1>Hello World</h1>
</div>

, а затем сделайте это в своем JavaScript:

var myControl = document.getElementById('myTextDiv');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(myControl);

Обратите внимание на важное отличие: если вы используете маршрут HTML для определения вашего div, вы должны установитьстиль позиции к абсолютному в HTML, чтобы избежать проблем с рендерингом.

Answer 2

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

Одна из причин, по которой вы хотели бы разбираться с панелями карт, заключается в том, что если вы хотите, чтобы такой «элемент управления» лежал под маркерами / тенями / полилиниями и т. Д. Я делаю это прямо сейчас, чтобы показать перекрестие в центре. карты в любое время. Но поскольку я сохраняю это как наложение, я выбираю панели таким образом, чтобы маркеры находились над ним, чтобы их можно было продолжать нажимать и взаимодействовать с помощью mapPane. Вот как я это делаю:

var CrosshairOverlay = function(map){
    this._holder = null;
    this.setMap(map);
};
CrosshairOverlay.prototype = new google.maps.OverlayView();
CrosshairOverlay.prototype.onAdd = function(){
    var map = this.getMap();
    var holder = this._holder = $('<div>').attr('id', 'crosshair')[0];

    var crosshairPaper = this._paper = R(holder, 150, 150);
    // ... all your drawing and rendering code here.
    var projection = this.getProjection();
    var wrappedHolder = $(holder);

    var updateCrosshairPosition = function(){
        var center = projection.fromLatLngToDivPixel(map.getCenter());
        wrappedHolder.css({left:center.x-75, top:center.y-75});
    }
    _.each(['drag','dragend','bounds_changed','center_changed','zoom_changed','idle','resize'], function(event){            
        google.maps.event.addListener(map, event, updateCrosshairPosition);
    });
    google.maps.event.addListener(map, 'maptypeid_changed', function(){
        _.defer(updateCrosshairPosition);
    });

    this.getPanes().mapPane.appendChild(holder);
};
CrosshairOverlay.prototype.draw = function(){
};
CrosshairOverlay.prototype.onRemove = function(){
    this._holder.parentNode.removeChild(this._holder);
    this._holder = null;
};

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