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

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

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

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

 Great Turtle29 июн. 2009 г., 14:13
Я думаю, что, возможно, нашел ответ ... мне кажется, что сайт недоступен, но у Google есть кеш. Я попробую это и посмотрю, как это работает. 74.125.95.132 / поиск д = кэш: HTTP: //googlemapsbook.com/2007/01/..

Ответы на вопрос(6)

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

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

Решение Вопроса

Во, хотя вам придется добавить его рядом с маркерами.

 Lance Cleveland20 нояб. 2016 г., 02:24
Google Maps JS V3 API имеет метод setLabel для маркеров. Developers.google.com / карты / документы / JavaScript / ...
 Drew Noakes07 окт. 2010 г., 23:17
Это удобно, хотя не работает с версией 3 API JavaScript Карт Google. Кроме того, если вы отодвинете масштаб достаточно далеко, этикетки пересекаются в нечитаемый суп. Тем не менее, лучшее предложение, которое я нашел до сих пор.
 Great Turtle30 июн. 2009 г., 02:58
Класс ELabel, на который ты указал мне, работает очень хорошо. Удивительный сайт Google Maps, кстати, не знаю, как я не нашел его в моих первоначальных поисках. Благодарность
 RedBlueThing30 июн. 2009 г., 02:25
У этого парня есть кое-что хорошее

https: //github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/example

Это специальный класс InfoBox. Вы можете увидеть ссылку на API по ссылке выше

Файл js можно включить отсюда:https: //github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.j

Cheers

то вы можете расширить маркер карт Google, чтобы добавить метод установки для метки, и вы можете определить объект метки, расширив оверлей Google MapsПросмотреть вот так ..

Демо: 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>

Это сработает.

 Atal Shrivastava18 сент. 2017 г., 08:59
спасибо, что работает как шарм !!!
 shana20 апр. 2016 г., 13:05
Чтобы убрать метку из маркера, используйте этоmarker.label.span.remove()
 YashG9925 янв. 2016 г., 22:16
Как убрать этот ярлык с карты? Удаление маркера не приводит к удалению метки с карты.

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

 draconis08 авг. 2014 г., 16:52
Ссылки, которыми вы поделились, предназначены для Android MapView, а не для Google Maps.
 Pravin Kumar29 нояб. 2012 г., 11:55
Хорошо ... Но это очень медленно по сравнению с обычными маркерами, когда количество маркеров составляет несколько тысяч ... Есть ли альтернатива этой проблеме? @ Дрю Ноакс.
 Drew Noakes22 янв. 2011 г., 23:34
Version 1.1.1 MarkerWithLabel был выпущен с некоторыми исправлениями.
 Drew Noakes17 июн. 2011 г., 18:11
В качестве примера использования этого API, проверьте созданный мной веб-сайт (продолжайте увеличивать карту, и сначала вы увидите маркеры, а затем метки при дальнейшем увеличении): Diveseven.com / атлас
 Pravin Kumar24 дек. 2012 г., 05:40
Спасибо большое, мужик .. @ Дрю Ноакс попробует с кластеризацией ..
 Drew Noakes23 дек. 2012 г., 14:46
@ PravinKumar, я не знаю ни о чем. У меня не было проблем с производительностью, но я не пытаюсь нарисовать столько маркеров. Я не уверен, насколько я хотел бы посмотреть на карту с тысячами точек, но, конечно, это зависит. Когда у меня было так много точек данных, я перешел к кластеризации, чтобы передавать информацию зрителям, и использовал маркеры только в том случае, если их масштабирование было достаточным, чтобы их можно было увидеть на экране.

Ваш ответ на вопрос