web-dev-qa-db-fra.com

Marqueur API Google Maps v3 avec étiquette

Je suis nouveau sur JS et l'API Google et j'essaie de créer plusieurs marqueurs chacun avec une étiquette.

D'après les petits extraits que j'ai consultés, il n'y avait pas de moyen simple d'attacher une étiquette à un marqueur dans l'API Google Maps v3. Entre les recherches Google et 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 de manière simple, car je commence tout juste à apprendre JS/Google API v3.

Merci

EDIT # 3: D'accord, j'ai finalement compris ce qui n'allait pas et j'ai correctement implémenté 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 peux utiliser des étiquettes pour chaque marqueur. Je veux pouvoir masquer les marqueurs et leurs étiquettes en fonction du niveau de zoom de l'utilisateur.

API Google Maps v3 - Différents marqueurs/étiquettes sur différents niveaux de zoom

javascripthtmlgoogle-mapsgoogle-maps-api-3
18
krikara

Je ne peux pas garantir que c'est le plus simple, mais j'aime MarkerWithLabel . Comme indiqué dans l'exemple de base , les styles CSS définissent l'apparence de l'étiquette et les options en JavaScript définissent le contenu et le placement.

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

Dans le cas où l'accès aux liens ci-dessus est bloqué, j'ai copié et collé le source emballée de MarkerWithLabel dans ce démo JSFiddle . J'espère que JSFiddle est autorisé en Chine: |

39
Tina CG Hoehr

Pour ajouter une étiquette à la carte, vous devez créer une superposition personnalisée. L'exemple sur 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 un support pour la visibilité, zIndex et un événement de clic) qui peut être trouvé ici: http://blog.mridey.com/2011/05/label-overlay-example-for-google -maps.html

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

Classe de calque 

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

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>
5
Jonathan

les solutions ci-dessus ne fonctionneront pas sur ipad-2

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

1
rohit verma