Google Maps API v3 marcador con la etiqueta

Question

Soy nuevo en JS y la API de Google y estoy tratando de hacer múltiples marcadores, cada uno con una etiqueta.

A partir de pequeños fragmentos que he estado viendo, no había una forma simple de adjuntar una etiqueta a un marcador en Google Maps API v3. Entre Google y las búsquedas de stackoverflow, todos utilizaron un procedimiento indirecto que implicó la creación o edición de la clase de etiqueta.

Solo quiero descubrir cómo adjuntar una etiqueta a cada marcador de una manera sencilla ya que estoy empezando a aprender JS/Google API v3.

Gracias

editar # 3: bien que por fin cuenta de lo que estaba mal y correctamente implementado múltiples marcadores con etiquetas con código de Lilina. Aparentemente los dos definimos el mapa var de forma diferente y eso hace que ambos códigos no puedan sincronizarse bien.

Tengo una pregunta adicional ahora que puedo usar etiquetas para cada marcador. Quiero ser capaz de ocultar marcadores y sus etiquetas en función del nivel de zoom en que se encuentre el usuario.

Google Maps API v3 - Different markers/labels on different zoom levels

Answer 1

No puedo garantizar que es el más simple, pero me gusta MarkerWithLabel. Como se muestra en the basic example, los estilos CSS definen la apariencia de la etiqueta y las opciones en JavaScript definen el contenido y la ubicación.

.labels { 
    color: red; 
    background-color: white; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    text-align: center; 
    width: 60px;  
    border: 2px solid black; 
    white-space: nowrap; 
} 

JavaScript:

var marker = new MarkerWithLabel({ 
    position: homeLatLng, 
    draggable: true, 
    map: map, 
    labelContent: "$425K", 
    labelAnchor: new google.maps.Point(22, 0), 
    labelClass: "labels", // the CSS class for the label 
    labelStyle: {opacity: 0.75} 
}); 

La única parte que puede ser confuso es el labelAnchor. De forma predeterminada, la esquina superior izquierda de la etiqueta se alineará con el punto final de la chincheta del marcador. Al establecer el valor x de la etiquetaAnchor a la mitad del ancho definido en la propiedad de ancho de CSS se centrará la etiqueta. Puede hacer que la etiqueta flote sobre el marcador de marcador con un punto de anclaje como new google.maps.Point(22, 50).

En caso de acceso a los enlaces de arriba están bloqueadas, He copiado y pegado el packed source de MarkerWithLabel en este JSFiddle demo.Espero que JSFiddle esté permitido en China: |

Answer 2

Para añadir una etiqueta al mapa que necesita para crear una plantilla personalizada. El ejemplo en http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html utiliza una clase personalizada, Layer, que hereda de OverlayView (que hereda de MVCObject) de la API de Google Maps. Él tiene una versión revisada (añade soporte para la visibilidad, zIndex y un evento de clic) que se puede encontrar aquí: http://blog.mridey.com/2011/05/label-overlay-example-for-google-maps.html

El siguiente código se toma directamente del Blog de Marc Ridey (revisada el enlace anterior).

clase de capa

// Define the overlay, derived from google.maps.OverlayView 
function Label(opt_options) { 
    // Initialization 
    this.setValues(opt_options); 


    // Label specific 
    var span = this.span_ = document.createElement('span'); 
    span.style.cssText = 'position: relative; left: -50%; top: -8px; ' + 
    'white-space: nowrap; border: 1px solid blue; ' + 
    'padding: 2px; background-color: white'; 


    var div = this.div_ = document.createElement('div'); 
    div.appendChild(span); 
    div.style.cssText = 'position: absolute; display: none'; 
}; 
Label.prototype = new google.maps.OverlayView; 


// Implement onAdd 
Label.prototype.onAdd = function() { 
    var pane = this.getPanes().overlayImage; 
    pane.appendChild(this.div_); 


    // Ensures the label is redrawn if the text or position is changed. 
    var me = this; 
    this.listeners_ = [ 
    google.maps.event.addListener(this, 'position_changed', function() { me.draw(); }), 
    google.maps.event.addListener(this, 'visible_changed', function() { me.draw(); }), 
    google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }), 
    google.maps.event.addListener(this, 'text_changed', function() { me.draw(); }), 
    google.maps.event.addListener(this, 'zindex_changed', function() { me.draw(); }), 
    google.maps.event.addDomListener(this.div_, 'click', function() { 
     if (me.get('clickable')) { 
     google.maps.event.trigger(me, 'click'); 
     } 
    }) 
    ]; 
}; 

// Implement onRemove 
Label.prototype.onRemove = function() { 
this.div_.parentNode.removeChild(this.div_); 

// Label is removed from the map, stop updating its position/text. 
for (var i = 0, I = this.listeners_.length; i < I; ++i) { 
    google.maps.event.removeListener(this.listeners_[i]); 
} 
}; 

// Implement draw 
Label.prototype.draw = function() { 
var projection = this.getProjection(); 
var position = projection.fromLatLngToDivPixel(this.get('position')); 

var div = this.div_; 
div.style.left = position.x + 'px'; 
div.style.top = position.y + 'px'; 
div.style.display = 'block'; 

this.span_.innerHTML = this.get('text').toString(); 
}; 

Uso

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title> 
     Label Overlay Example 
    </title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="label.js"></script> 
    <script type="text/javascript"> 
     var marker; 


     function initialize() { 
     var latLng = new google.maps.LatLng(40, -100); 


     var map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 5, 
      center: latLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 


     marker = new google.maps.Marker({ 
      position: latLng, 
      draggable: true, 
      zIndex: 1, 
      map: map, 
      optimized: false 
     }); 


     var label = new Label({ 
      map: map 
     }); 
     label.bindTo('position', marker); 
     label.bindTo('text', marker, 'position'); 
     label.bindTo('visible', marker); 
     label.bindTo('clickable', marker); 
     label.bindTo('zIndex', marker); 


     google.maps.event.addListener(marker, 'click', function() { alert('Marker has been clicked'); }) 
     google.maps.event.addListener(label, 'click', function() { alert('Label has been clicked'); }) 
     } 


     function showHideMarker() { 
     marker.setVisible(!marker.getVisible()); 
     } 


     function pinUnpinMarker() { 
     var draggable = marker.getDraggable(); 
     marker.setDraggable(!draggable); 
     marker.setClickable(!draggable); 
     } 
    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="height: 200px; width: 200px"></div> 
    <button type="button" onclick="showHideMarker();">Show/Hide Marker</button> 
    <button type="button" onclick="pinUnpinMarker();">Pin/Unpin Marker</button> 
    </body> 
</html> 

Answer 3

las soluciones anteriores no trabajarán en IPAD-2

Recientemente he tenido un problema bloqueo del navegador Safari, mientras que el trazado de los marcadores, incluso si hay menos cantidad de marcadores. Inicialmente estaba usando marcador con etiqueta (markerwithlabel.js) library para trazar el marcador, cuando uso el marcador nativo de Google estaba funcionando bien incluso con un gran número de marcadores pero quiero marcadores personalizados, por lo que me refiero a la solución anterior dada por jonathan pero todavía el problema no se resuelve después de hacer mucha investigación llegué a saber acerca de http://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markers este blog y ahora mi búsqueda de mapa está funcionando sin problemas en ipad-2 :)