Marqueur Google Maps API v3 avec libellé

Question

Je suis nouveau sur JS et l'API Google et j'essaie de créer plusieurs marqueurs avec une étiquette. À partir de petits extraits que j'ai consultés, il n'y avait pas de moyen simple de joindre une étiquette à un marqueur dans l'API v3 de Google Maps. Entre Google et les recherches de stackoverflow, tout le monde a utilisé une procédure de rond-point qui impliquait la création ou la modification de la classe d'étiquettes. Je veux juste comprendre comment attacher une étiquette à chaque marqueur d'une manière simple puisque je commence juste à apprendre JS/Google API v3.

Merci

EDIT # 3: D'accord, je finalement compris ce qui était erroné et correctement mis en œuvre plusieurs marqueurs avec des étiquettes en utilisant le code de Lilina. Apparemment, nous avons tous deux défini la carte var différemment et cela rend nos deux codes incapables de bien se synchroniser.

J'ai une question supplémentaire maintenant que je suis capable d'utiliser des étiquettes pour chaque marqueur. Je veux pouvoir masquer les marqueurs et leurs étiquettes en fonction du niveau de zoom auquel l'utilisateur se trouve.

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

Answer 1

Je ne peux pas garantir que c'est le plus simple, mais j'aime MarkerWithLabel. Comme illustré dans the basic example, les styles CSS définissent l'apparence de l'étiquette et les options dans le JavaScript définissent le contenu et l'emplacement.

.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 seule partie qui peut être source de confusion est le labelAnchor. Par défaut, le coin supérieur gauche de l'étiquette s'alignera sur le point final de la punaise. La définition de la valeur x de labelAnchor à la moitié de la largeur définie dans la propriété CSS width va centrer l'étiquette. Vous pouvez faire flotter l'étiquette au-dessus de la punaise avec un point d'ancrage comme new google.maps.Point(22, 50).

Si l'accès aux liens ci-dessus est bloqué, j'ai copié et collé le packed source de MarkerWithLabel dans ce JSFiddle demo.J'espère que JSFiddle est autorisé en Chine: |

Answer 2

Pour ajouter une étiquette à la carte dont vous avez besoin pour créer une superposition personnalisée. L'exemple à http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html utilise une classe personnalisée, Layer, qui hérite de OverlayView (qui hérite de MVCObject) de l'API Google Maps. Il a une version révisée (ajoute le support pour une meilleure visibilité, zIndex et un événement click) qui se trouve ici: http://blog.mridey.com/2011/05/label-overlay-example-for-google-maps.html

Le code suivant est tiré directement du blog de Marc Ridey (le lien révisé ci-dessus).

classe couche

// 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(); 
}; 

d'utilisation

<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

les solutions ci-dessus wont travail sur ipad-2

J'ai eu récemment un problème de plantage du navigateur Safari en traçant les marqueurs, même s'il y a moins nombre de marqueurs. Initialement, j'utilisais marker avec label (markerwithlabel.js) bibliothèque pour tracer le marqueur, quand j'utilise google natif, il fonctionnait bien même avec un grand nombre de marqueurs mais je veux des marqueurs personnalisés, donc je renvoie la solution ci-dessus donnée par jonathan mais le problème n'est pas résolu après avoir fait beaucoup de recherches sur http://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markers ce blog et maintenant ma recherche de carte fonctionne correctement sur ipad-2 :)