google-maps - addlistener - show info marker google maps android

¿Cómo crear una superposición de texto en Google Maps API v3 que no funciona?

Question

Estoy usando Google Maps API v3. Me gustaría crear una superposición de texto en un mapa que no se mueve cuando se panoramiza el mapa. ¿Es el mejor método para manipular los elementos DOM accesibles desde el objeto MapPanes o es mejor crear un control personalizado aunque no haga mucho más que mostrar texto?

Answer 1

Según lo que describes, el mejor enfoque sería un control personalizado. Los documentos para eso están aquí . Los controles personalizados pueden ser tan simples o complicados como lo desee.

Una razón por la que te gustaría ensuciar con los paneles del mapa es si querías que ese "control" estuviera debajo de los marcadores / sombras / polilíneas, etc. Estoy haciendo esto ahora mismo para mostrar un punto de mira en el centro del mapa en todo momento. Pero debido a que lo mantengo como una superposición, elijo los paneles de tal manera que los marcadores están por encima de ellos, por lo que se puede seguir haciendo clic e interactuando con ellos utilizando el mapPane . Así es como lo estoy haciendo:

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

La razón por la que maptypeid_changed tiene su propio controlador con un defer es porque ese evento se dispara antes de que el mapa se establezca correctamente al cambiar el tipo. Simplemente ejecute su función después del ciclo de eventos actual.

Answer 2

La forma más simple que encontré funcionó para mí fue agregar algunas líneas de JavaScript después de crear un nuevo mapa. Entonces, después de esto:

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

Agrega esto:

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

Es probable que desee darle un estilo al texto para que se vea mejor.

Una alternativa es poner el div en tu HTML:

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

y luego haz esto en tu JavaScript:

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

NOTA una diferencia importante: si usa la ruta HTML para definir su div, debe establecer el estilo de posición en absoluto en el HTML para evitar problemas de representación.