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

Ответ 1

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

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

Ответ 2

Начиная с октября 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. Если мы хотим использовать значок по умолчанию, то

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

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

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

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

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 без каких-либо плагинов:)

Ответ 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 Maps здесь: https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html

Ответ 4

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

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

Ответ 5

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