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

22

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

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

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

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

Ваш Ответ

6   ответов
13

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

Класс ELabel, на который ты указал мне, работает очень хорошо. Удивительный сайт Google Maps, кстати, не знаю, как я не нашел его в моих первоначальных поисках. Благодарность Great Turtle
У этого парня есть кое-что хорошее RedBlueThing
Это удобно, хотя не работает с версией 3 API JavaScript Карт Google. Кроме того, если вы отодвинете масштаб достаточно далеко, этикетки пересекаются в нечитаемый суп. Тем не менее, лучшее предложение, которое я нашел до сих пор. Drew Noakes
Google Maps JS V3 API имеет метод setLabel для маркеров. Developers.google.com / карты / документы / JavaScript / ... Lance Cleveland
25
Version 1.1.1 MarkerWithLabel был выпущен с некоторыми исправлениями. Drew Noakes
Хорошо ... Но это очень медленно по сравнению с обычными маркерами, когда количество маркеров составляет несколько тысяч ... Есть ли альтернатива этой проблеме? @ Дрю Ноакс. Pravin Kumar
В качестве примера использования этого API, проверьте созданный мной веб-сайт (продолжайте увеличивать карту, и сначала вы увидите маркеры, а затем метки при дальнейшем увеличении): Diveseven.com / атлас Drew Noakes
Спасибо большое, мужик .. @ Дрю Ноакс попробует с кластеризацией .. Pravin Kumar
@ PravinKumar, я не знаю ни о чем. У меня не было проблем с производительностью, но я не пытаюсь нарисовать столько маркеров. Я не уверен, насколько я хотел бы посмотреть на карту с тысячами точек, но, конечно, это зависит. Когда у меня было так много точек данных, я перешел к кластеризации, чтобы передавать информацию зрителям, и использовал маркеры только в том случае, если их масштабирование было достаточным, чтобы их можно было увидеть на экране. Drew Noakes
6

то вы можете расширить маркер карт 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 Shrivastava
Как убрать этот ярлык с карты? Удаление маркера не приводит к удалению метки с карты. YashG99
Чтобы убрать метку из маркера, используйте этоmarker.label.span.remove() shana
0

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

Ссылки, которыми вы поделились, предназначены для Android MapView, а не для Google Maps. draconis
0

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

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

2

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

Похожие вопросы