Google Maps V3 marker z etykietą

Question

Jak mogę dodać etykietę do mojego znacznika, jeśli moje znaczniki są wypełniane po sukcesie ajaxowym każdego wyniku.

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

Próbowałem tak, ale bez powodzenia:

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

Wątpię średnia biblioteka obsługuje tego.

Ale można użyć google bibliotekę użytkową mapy:

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

Podstawy o markera można znaleźć tutaj: https://developers.google.com/maps/documentation/javascript/overlays#Markers

Answer 2

sposób to zrobić to bez użycia wtyczek jest utworzenie podklasy metody Google OverlayView().

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

dokonać funkcję niestandardową i zastosować go do mapy.

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

Teraz prototyp swoją podklasę i dodać węzły 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 

}

trzeba także wdrożyć usuń i narysować funkcje jak stwierdzono w docs API, czy to nie będzie praca.

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' 
      }) 
     ; 
} 

To jest sedno tego, będziesz musiał zrobić więcej pracy w swojej konkretnej realizacji.

Answer 3

Jeśli chcesz tylko pokazać etykietę poniżej znacznika, a następnie można rozszerzyć Google Maps Marker dodać metodę seter na etykiecie można określić przedmiot etykiet poprzez rozszerzenie Google Maps wyświetlanie nakładki tak ..

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

To zadziała.

Answer 4

Obsługa etykiet znaczników pojedynczych znaków to added to Google Maps w wersji 3.21 (sierpień 2015). Zobacz new marker label API.

Możesz teraz stworzyć swój znacznik label tak:

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

Jeśli chcesz zobaczyć usunięto ograniczenie 1 znak, proszę głosować na this issue.

Aktualizacja październik 2016:

Ten problem was fixed a od wersji 3.26.10, Google Maps natywnie obsługuje wiele etykiet charakter w połączeniu z ikon niestandardowych korzystających MarkerLabels.