javascript - marcadores - Marcador de Google Maps API v3 con etiqueta

google.maps.marker label

Question

Soy nuevo en JS y en la API de Google y estoy tratando de crear 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

EDIT # 3: De acuerdo, finalmente descubrí lo que estaba mal e implementé correctamente varios marcadores con etiquetas que usan el 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 poder ocultar marcadores y sus etiquetas según el nivel de zoom en el que esté el usuario.

Google Maps API v3 - Diferentes marcadores / etiquetas en diferentes niveles de zoom

Answer 1

No puedo garantizar que sea el más simple, pero me gusta MarkerWithLabel . Como se muestra en el ejemplo básico , 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 confusa es la etiqueta de anclaje. 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 que el acceso a los enlaces de arriba esté bloqueado, copié y pegué el fuente empaquetado de MarkerWithLabel en esta demostración de JSFiddle . Espero que JSFiddle esté permitido en China: |

Answer 2

Para agregar una etiqueta al mapa, debe crear una superposición personalizada. El ejemplo en http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html usa una clase personalizada, Layer , que hereda de OverlayView (que hereda de MVCObject ) de Google Maps API. Tiene una versión revisada (agrega soporte para 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 (el enlace revisado arriba).

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 funcionarán en ipad-2

Recientemente tuve un problema de bloqueo del navegador Safari al trazar los marcadores, incluso si hay menos marcadores. Inicialmente estaba usando marcador con etiqueta (markerwithlabel.js) para trazar el marcador, cuando uso el marcador nativo de Google funcionaba bien incluso con una gran cantidad de marcadores, pero quiero marcadores personalizados, por lo que recomiendo la solución anterior dada por jonathan pero Todavía el problema no se resuelve después de hacer muchas investigaciones que llegué a conocer sobre http://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markers este blog y ahora mi mapa la búsqueda funciona sin problemas en ipad-2 :)