Маркер Google Maps V3 с меткой

Ответ 1

Я сомневаюсь, что стандартная библиотека поддерживает это.

Но вы можете использовать утилиту google maps:

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

Основы маркера можно найти здесь: https://developers.google.com/maps/documentation/javascript/overlays#Markers

Ответ 2

Если вы хотите показать ярлык ниже маркера, вы можете расширить маркеры Google Marker, чтобы добавить метод setter для метки, и вы можете определить объект метки, расширив наложения google maps, как это.

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

Это будет работать.

Ответ 3

Поддержка однотипных меток маркеров была добавлена ​​в Карты Google в версии 3.21 (август 2015 г.). См. новый API метки маркера.

Теперь вы можете создать свой маркер метки следующим образом:

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

Если вы хотите удалить ограничение 1 символа, проголосуйте за эту проблему.

Обновить октябрь 2016 года:

Этот вопрос был исправлен, а с версии 3.26.10 Google Maps изначально поддерживает несколько ярлыков символов в сочетании с пользовательскими значками, используя MarkerLabels.

Ответ 4

Способ сделать это без использования плагинов заключается в создании подкласса метода google OverlayView().

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

Вы создаете пользовательскую функцию и применяете ее к карте.

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

Теперь вы прототипируете свой подкласс и добавляете узлы HTML:

Label.prototype = new google.maps.OverlayView; //subclassing google 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

}

вам также необходимо реализовать функции удаления и рисования, указанные в документах API, или это не сработает.

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

Чтобы судить об этом, вам нужно будет сделать еще одну работу в вашей конкретной реализации.