Как я могу постоянно показывать метку / заголовок для маркера в Google Maps V3

Question

Я хочу отобразить маркеры на карте Google с заголовком, отображаемым под ними, как показано на рисунке

Теперь это чтение было возможно в версии 2 с использованием ELabel, но устарело в версии 3.Есть ли какой-нибудь возможный способ показать какой-либо текст под значками маркеров в Google Maps V3?

Answer 1

По крайней мере с октября 2016 года официальный API предоставляет возможность добавлять постоянно видимые метки, длина которых превышает одну букву. См. этот ответ участника проекта Google .

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: 'Hello world',
});

По умолчанию результат выглядит так:

Довольно нечитабельно. К счастью, API также позволяет использовать объект MarkerLabel вместо простой строки:

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: {
    color: 'white',
    fontWeight: 'bold',
    text: 'Hello world',
  },
});

Приведенный выше фрагмент кода дает следующий результат:

Однако в первоначальном вопросе спрашивалось, может ли этикетка находиться под маркером. Документы MarkerLabel упоминают, что это возможно с помощью пользовательского значка и свойства labelOrigin. Если мы хотим использовать значок по умолчанию, один из них доступен на GitHub . Давайте добавим значок объекта:

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: {
    color: 'white',
    fontWeight: 'bold',
    text: 'Hello world',
  },
  icon: {
    labelOrigin: new google.maps.Point(11, 50),
    url: 'default_marker.png',
    size: new google.maps.Size(22, 40),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(11, 40),
  },
});

Результаты:

Довольно хорошо! Однако у всего этого подхода есть недостаток, которого нет в рамке исходного вопроса: удобочитаемость для каждого типа карты. Если тип карты изменяется со спутника на стандартную, результирующую метку трудно прочитать:

Простой, но не идеальный способ избежать низкого контраста в обоих типах - установить color: 'gray':

Тем не менее, серый цвет не подходит для городских районов. Лучшим вариантом было бы применить text-shadow свойство CSS для рисования черных линий для белого текста. Однако я не могу найти способ применить свойство к меткам, потому что несколько элементов DOM, созданных в Картах Google, определяют класс:

Лучший вариант, который мне подошел, - это обнаружить изменения в типе карты и обновить цвет метки для каждого маркера:

map.addListener('maptypeid_changed', function () {
  var typeToColor, type, color, k, label;

  typeToColor = {
    'terrain': 'black',
    'roadmap': 'black',
    'hybrid': 'white',
    'satellite': 'white',
  };

  type = map.getMapTypeId();
  color = typeToColor[type];

  for (k in markers) {
    if (markers.hasOwnProperty(k)) {
      label = markers[k].getLabel();
      label.color = color;
      markers[k].setLabel(label);
    }
  }
});

Однако даже это может не сработать на снежных или облачных спутниковых снимках. Я думаю, что это все еще достаточно хорошо в большинстве случаев. Тем не менее, приятно иметь возможность отображать видимые метки с помощью официального API, без каких-либо плагинов:)

Answer 2

Я нашел решение в другом посте, который отлично сработал для меня.

Добавить метку нумерации на маркер карты Google

Answer 3

Я использую следующее:

MarkerWithLabel.js

(изображение является просто файлом flag.png)

Использованиеjavascript в моем документе X.html

это выглядит примерно так ...

    <style type="text/css">
        .labels {
            color: black;
            background-color: white;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 0.8em;
            font-weight: bold;
            text-align: center;
            width: 6em;
            border: 1px solid black;
            white-space: normal;
        }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=true"></script>
    <!--MarkerwithLabelClass - adjust the path!! -->
    <script src="YourPathHere/markerwithlabel.js"></script>

<script type="text/javascript">
//insert standaard initializing of googlemaps here
//and other windows.onload function
window.onload = function Initialize() {
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }
         function CreateMarker(lat, long, titel, label, image, anchorY, anchorX){

                   var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));//I use parseFloat cause my parameters are strings(coming from JSON-string)
                    var marker = new MarkerWithLabel({
                        zIndex: 1,
                        title: titel,
                        position: latlng,
                        draggable: false,
                        icon: image,
                        labelContent: label,
                        labelAnchor: new google.maps.Point(30, -2),
                        labelClass: "labels", // the CSS class for the label
                        labelStyle: { opacity: 0.80 }
                    });

                    return marker;
    }
 </script>

Ознакомьтесь с информацией о лицензии для API карт Google здесь: https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html

Answer 4

Ты не можешь!Но есть еще одна часть API карт, которую вы можете использовать для постоянного отображения текста, прикрепленного к вашим маркерам (без использования сторонних компонентов), она называется infoWindow.Взгляните на это для примера кода и посмотрите его в действии: https://developers.google.com/maps/documentation/javascript/examples/event-closure

Если вы решитесь использовать сторонний код, то вот что-то, что ближе к внешнему виду и ощущению, которое вы хотите: http://google -maps-utility-library-v3.googlecode.com / SVN / багажник / инфобокс / Docs / examples.html

Answer 5

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