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

Question

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

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

Заранее спасибо!

Answer 1

Для Google Maps JavaScript API v3, ознакомьтесь с примерами здесь .

Исходный код доступен в обычном и свернутом виде .

Answer 2

Есть хороший класс меток здесь , хотя вам придется добавить его рядом с маркерами.

Answer 3

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

Демонстрация: 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>

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

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

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

Answer 6

Даже на этот вопрос я нашел этот ресурс , который, я думаю, является хорошим решением для этой проблемы и может быть полезным. Также подобное решение можно найти здесь .