Как отображать ярлык рядом с маркером для Карт Google?

Question

Я хотел бы отобразить текстовую метку рядом с маркерами на картах Google. Я использовал Virtual Earth раньше, и я только начинаю использовать Карты Google. Я попытался установить свойство Title, но это изменит только перелистывание текста.

Есть ли способ отобразить небольшую строку текста под маркером, который останется там, когда пользователь масштабирует, кастрюли и использует карту?

Заранее благодарен!

Answer 1

Существует хороший класс ярлыков here, хотя вам придется добавить его вместе с маркерами.

Answer 2

Для API Google Maps JavaScript v3, выйдите the examples here.

Source code available in normal and minimised forms.

Answer 3

Даже этот вопрос был дан ответ Я нашел this resource, который, я думаю, является хорошим решением для этой проблемы и может быть полезен. Кроме того, аналогичное решение можно найти here.

Answer 4

Ниже приведен пример кода, который позволит решить проблему: https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples

Это обычай класс называется InfoBox. Вы можете увидеть API реф по ссылке выше

JS файл может быть включен здесь: https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js

Ура!

Answer 5

Альтернативой использованию библиотеки js является просто создать значок .png, который будет содержать ваш текст. Это звучит глупо, но для этого вы можете использовать внешнюю службу (например, this one).

Вы загружаете свою иконку и получаете ссылку в ответ. Если вы добавите какой-то текст в URL-адрес ссылок, он вернет вашу иконку с этим текстом, переданным в нее.

Answer 6

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

Демонстрация: jsFiddle

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

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