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

Question

Я работаю над картой, на которой есть несколько маркеров.

Эти маркеры используют пользовательский значок, но я также хотел бы добавить цифры сверху. Я видел, как это было достигнуто с помощью более старых версий API. Как я могу сделать это в V3?

* Примечание. Атрибут «title» создает всплывающую подсказку, когда вы наводите курсор мыши на маркер, но я хочу что-то, что будет наслоено поверх пользовательского изображения, даже если вы не зависаете над ним.

Вот документация для класса маркера, и ни один из этих атрибутов, кажется, не помогает: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

Answer 1

Возможно, есть люди, которые все еще ищут это, но находят значки Google Dynamic устаревшими, а другие библиотеки значков карты немного слишком уродливыми.

Чтобы добавить простой маркер с любым числом внутри, используя URL.В Google Диске с использованием Google My Maps создаются нумерованные значки при использовании слоя карты, для которого задано «Последовательность чисел», а затем при добавлении маркеров / точек на карту.

Глядя на исходный код, Googleимеет свой собственный способ сделать это через URL:

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=ff000000,0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=56&font=fonts/Roboto-Medium.ttf

выше URL

Iне играл с ним широко, но изменяя шестнадцатеричные цветовые коды в параметре 'highlight' (параметр цвета не меняет цвет, как вы думаете), значение 'text' может быть установлено на любую строку, и вы можете сделатьхороший круглый значок с любым числом / значением внутри.Я уверен, что другие параметры тоже могут быть полезны.

Одно предостережение при таком подходе, который знает, когда Google удалит этот URL из мира!

Answer 2

ПРОСТОЕ РЕШЕНИЕ - ИСПОЛЬЗОВАНИЕ SVG

Работает в: в IE9 , IE10 , FF, Chrome, Safari

(если вы используете другие браузеры, пожалуйста, "Запустите фрагмент кода" и оставьте комментарий)

Никаких внешних зависимостей, кроме Google Maps API!

Это довольно легко, если у вас есть значок в формате .svg . Если это так, просто добавьте соответствующий текстовый элемент и измените его содержимое в соответствии с вашими потребностями с помощью JS.

Добавьте что-то подобное в ваш .svg код (это текстовый раздел, который позже будет изменен с помощью JS):

<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>

Пример: (частично скопировано из @ EstevãoLucas)

Важно: Используйте правильные свойства тега <text>. Обратите внимание text-anchor="middle" x="50%" y="28", в каком центре более длинные цифры (подробнее: Как разместить текст по центру в прямоугольнике SVG )

Использовать encodeURIComponent() (это, вероятно, обеспечивает совместимость с IE9 и 10)

// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) {
  // inline your SVG image with number variable
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke-width="4" mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">' + number + '</text> </g> </g> </g> </svg>';
  // use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}

// Standard Maps API code
var markers = [
  [1, -14.2350040, -51.9252800],
  [2, -34.028249, 151.157507],
  [3, 39.0119020, -98.4842460],
  [5, 48.8566140, 2.3522220],
  [9, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 4,
    center: myLatLng
  });

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: getMarkerIcon(point[0]),         
      });

      bounds.extend(pos);
  });

  map.fitBounds(bounds);
}

initializeMaps();

#map_canvas {
  width: 100%;
  height: 300px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>        
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

Подробнее о встроенном SVG в Картах Google: https://robert.katzki.de/posts/inline-svg-as-google-maps-marker

Answer 3

Я нашел лучший способ сделать это.Используйте Snap.svg для создания svg, а затем используйте функцию toDataURL (), которая создает графические данные для включения в качестве значка.Обратите внимание, что я использую класс SlidingMarker для маркера, который дает мне хорошее движение маркера.С Snap.svg вы можете создавать любые виды графики, и ваша карта будет выглядеть фантастически.

var s = Snap(100, 100);
s.text(50, 50, store.name);
// Use more graphics here.
var marker = new SlidingMarker({
  position: {lat: store.lat, lng: store.lng},
  map: $scope.map,
  label: store.name, // you do not need this
  title: store.name, // nor this
  duration: 2000,
  icon: s.toDataURL()
});

Answer 4

Здесь представлены пользовательские значки с обновленным стилем «визуальное обновление», которые можно быстро создать с помощью простого сценария .vbs. Я также включил большой предварительно сгенерированный набор, который можно использовать сразу с несколькими вариантами цвета: https://github.com/Concept211/Google-Maps-Markers

Используйте следующий формат при связывании с файлами изображений, размещенными на GitHub:

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png

цвет
красный, черный, синий, зеленый, серый, оранжевый, фиолетовый, белый, желтый

символ
A-Z, 1-100,!, @, $, +, -, =, (% 23 = #), (% 25 =%), (% 26 = &), (пробел = •)

Примеры:

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png

Answer 5

Вы можете использовать опцию «Маркер с меткой» в google-maps-utility-library-v3.

Просто обратитесь https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

Answer 6

На основе @ dave1010 ответа, но с обновленными https ссылками.

Нумерованный маркер:

https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

Текстовый маркер:

https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker