Google Maps V3 marker with label

问题:

How can I add label to my marker if my markers are populated on ajax success each result.

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

I tried like this, but with no success:

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

回答1:

I doubt the standard library supports this.

But you can use the google maps utility library:

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

The basics about marker can be found here: https://developers.google.com/maps/documentation/javascript/overlays#Markers

回答2:

If you just want to show label below the marker, then you can extend google maps Marker to add a setter method for label and you can define the label object by extending google maps overlayView like this..

This will work.

回答3:

Support for single character marker labels was added to Google Maps in version 3.21 (Aug 2015). See the new marker label API.

You can now create your label marker like this:

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

If you would like to see the 1 character restriction removed, please vote for this issue.

Update October 2016:

This issue was fixed and as of version 3.26.10, Google Maps natively supports multiple character labels in combination with custom icons using MarkerLabels.

回答4:

The way to do this without use of plugins is to make a subclass of google's OverlayView() method.

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

You make a custom function and apply it to the map.

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

Now you prototype your subclass and add HTML nodes:

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 

}

you also have to implement remove and draw functions as stated in the API docs, or this won't work.

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

That's the gist of it, you'll have to do some more work in your specific implementation.

文章来源: Google Maps V3 marker with label