Indicatore V3 di Google Maps con etichetta

Question

Come posso aggiungere un'etichetta al mio marcatore se i miei indicatori sono compilati con successo ad ogni risultato.

map.gmap('addMarker', { 'position': new google.maps.LatLng(result.latitude, result.longitude) }); 

ho provato in questo modo, ma senza successo:

map.gmap('addMarker', { 
    'position': new google.maps.LatLng(result.latitude, result.longitude), 
    'bounds': true, 
    'icon': markerIcon, 
    'labelContent': 'A', 
    'labelAnchor': new google.maps.Point(result.latitude, result.longitude), 
    'labelClass': 'labels', // the CSS class for the label 
    'labelInBackground': false 
}); 

Answer 1

dubito della libreria standard supporta questa.

Ma è possibile utilizzare Google libreria di utilità mappe:

http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel

var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 

var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

var marker = new MarkerWithLabel({ 
    position: myLatlng, 
    map: map, 
    draggable: true, 
    raiseOnDrag: true, 
    labelContent: "A", 
    labelAnchor: new google.maps.Point(3, 30), 
    labelClass: "labels", // the CSS class for the label 
    labelInBackground: false 
}); 

Le basi su marcatore possono essere trovate qui: https://developers.google.com/maps/documentation/javascript/overlays#Markers

Answer 2

Il modo per farlo senza l'uso di plugin consiste nel creare una sottoclasse del metodo OverlayView() di Google.

https://developers.google.com/maps/documentation/javascript/reference?hl=en#OverlayView

si effettua una funzione personalizzata e applicarlo alla mappa.

function Label() { 
    this.setMap(g.map); 
}; 

Ora è prototipo sottoclasse e aggiungere i nodi HTML:

Label.prototype = new google.maps.OverlayView; //subclassing google's overlayView 
Label.prototype.onAdd = function() { 
     this.MySpecialDiv    = document.createElement('div'); 
     this.MySpecialDiv.className  = 'MyLabel'; 
     this.getPanes().overlayImage.appendChild(this.MySpecialDiv); //attach it to overlay panes so it behaves like markers 

}

si hanno anche per implementare rimuovere e disegnare funzioni come dichiarato nella documentazione API, o questo non lo farà lavoro.

Label.prototype.onRemove = function() { 
... // remove your stuff and its events if any 
} 
Label.prototype.draw = function() { 
     var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); // translate map latLng coords into DOM px coords for css positioning 
var pos = this.get('position'); 
      $('.myLabel') 
      .css({ 
       'top' : position.y + 'px', 
       'left' : position.x + 'px' 
      }) 
     ; 
} 

Questo è l'essenza di questo, dovrete fare un po 'più di lavoro nella vostra implementazione specifica.

Answer 3

Se si desidera solo per mostrare l'etichetta sotto il marcatore, quindi è possibile estendere Google Maps Marker per aggiungere un metodo setter per l'etichetta e si può definire l'oggetto etichetta estendendo Google Maps OverlayView come questo ..

<script type="text/javascript"> 
    var point = { lat: 22.5667, lng: 88.3667 }; 
    var markerSize = { x: 22, y: 40 }; 


    google.maps.Marker.prototype.setLabel = function(label){ 
     this.label = new MarkerLabel({ 
      map: this.map, 
      marker: this, 
      text: label 
     }); 
     this.label.bindTo('position', this, 'position'); 
    }; 

    var MarkerLabel = function(options) { 
     this.setValues(options); 
     this.span = document.createElement('span'); 
     this.span.className = 'map-marker-label'; 
    }; 

    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), { 
     onAdd: function() { 
      this.getPanes().overlayImage.appendChild(this.span); 
      var self = this; 
      this.listeners = [ 
      google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })]; 
     }, 
     draw: function() { 
      var text = String(this.get('text')); 
      var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); 
      this.span.innerHTML = text; 
      this.span.style.left = (position.x - (markerSize.x/2)) - (text.length * 3) + 10 + 'px'; 
      this.span.style.top = (position.y - markerSize.y + 40) + 'px'; 
     } 
    }); 
    function initialize(){ 
     var myLatLng = new google.maps.LatLng(point.lat, point.lng); 
     var gmap = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 5, 
      center: myLatLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var myMarker = new google.maps.Marker({ 
      map: gmap, 
      position: myLatLng, 
      label: 'Hello World!', 
      draggable: true 
     }); 
    } 
</script> 
<style> 
    .map-marker-label{ 
     position: absolute; 
    color: blue; 
    font-size: 16px; 
    font-weight: bold; 
    } 
</style> 

Questo funzionerà.

Answer 4

Il supporto per etichette di contrassegni a carattere singolo era added to Google Maps nella versione 3.21 (agosto 2015). Vedi lo new marker label API.

È ora possibile creare il marcatore etichetta in questo modo:

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(result.latitude, result.longitude), 
    icon: markerIcon, 
    label: { 
    text: 'A' 
    } 
}); 

Se volete vedere la restrizione 1 carattere rimosso, si prega di votare per this issue.

Aggiornamento Ottobre 2016:

Questo problema was fixed e dalla versione 3.26.10, Google Maps supporta nativamente più etichette di carattere, in combinazione con le icone personalizzate che utilizzano MarkerLabels.