API Карт Google 3 – Пользовательский цвет маркера для маркера по умолчанию (точка)

Я видел много других вопросов, подобных этому ( здесь , здесь и здесь ), но все они приняли ответы, которые не решают мою проблему. Лучшим решением, которое я обнаружил в этой проблеме, является библиотека StyledMarker , которая позволяет вам определять пользовательские цвета для маркеров, но я не могу заставить ее использовать маркер по умолчанию (тот, который вы получаете, когда выполняете поиск в Google Maps, – с точка посередине), он просто, кажется, обеспечивает маркеры буквой или специальным значком.

Вы можете динамически запрашивать изображения изображений из графиков Google api с URL-адресами:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569 

Это выглядит так: цвет по умолчанию изображение составляет 21 × 34 пикселя, а наконечник кончика находится в положении (10, 34)

И вам также понадобится отдельный теневой образ (чтобы он не перекрывал соседние значки):

 http://chart.apis.google.com/chart?chst=d_map_pin_shadow 

Это выглядит так: введите описание изображения здесь изображение составляет 40×37 пикселей, а наконечник кончика находится в положении (12, 35)

Когда вы создаете свой MarkerImage, вам нужно установить размер и точки привязки соответственно:

  var pinColor = "FE7569"; var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34)); var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", new google.maps.Size(40, 37), new google.maps.Point(0, 0), new google.maps.Point(12, 35)); 

Затем вы можете добавить маркер к своей карте с помощью:

  var marker = new google.maps.Marker({ position: new google.maps.LatLng(0,0), map: map, icon: pinImage, shadow: pinShadow }); 

Просто замените «FE7569» на код цвета, который вам нужен. Например: цвет по умолчаниюзеленыйжелтый

Кредит из-за Jack B Nimble для вдохновения;)

Если вы используете Google Maps API v3, вы можете использовать setIcon например

 marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

Или как часть маркера init:

 marker = new google.maps.Marker({ icon: 'http://...' }); 

Другие цвета:

  • Синий маркер
  • введите описание изображения здесь Красный маркер
  • введите описание изображения здесь Фиолетовый маркер
  • введите описание изображения здесь Желтый маркер
  • введите описание изображения здесь Зеленый маркер

Используйте следующий fragment кода для обновления маркеров по умолчанию с разными цветами.

 (BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE) 

Вот хорошее решение, использующее API-интерфейс Gooogle Maps. Нет внешнего сервиса, нет дополнительной библиотеки. И он позволяет настраивать фигуры и несколько цветов и стилей. В решении используются векторные маркеры, которые googlemaps api называет символами .

Помимо нескольких и ограниченных предопределенных символов, вы можете создать любую форму любого цвета, указав строку пути SVG ( Spec ).

Чтобы использовать его, вместо установки опции «значок» в URL-адрес изображения, вы устанавливаете его в словарь, содержащий параметры символа. Например, мне удалось создать один символ, который очень похож на стандартный маркер:

 function pinSymbol(color) { return { path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', fillColor: color, fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 1, }; } var marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(latitude, longitude), icon: pinSymbol("#FFF"), }); 

Векторный маркер

Я стараюсь, чтобы ключевой момент формы был равен 0,0, вы не должны определять параметры центрирования значка маркера. Другой пример пути, тот же маркер без точки:

  path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 

Dotless Vector Marker

И здесь у вас очень простой и уродливый цветный флаг:

  path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z', 

Векторный флаг

Вы также можете создавать пути с помощью визуального инструмента, такого как Inkscape (GNU-GPL, мультиплатформенный). Некоторые полезные советы:

  • API Google просто принимает один путь, поэтому вам нужно превратить любой другой объект (квадрат, cercle …) в путь и присоединиться к ним как к одному. Обе команды в меню «Путь».
  • Чтобы переместить путь к (0,0), перейдите в режим редактирования пути (F2), выберите все узлы управления и перетащите их. Перемещение объекта с помощью F1 не изменит координаты узла пути.
  • Чтобы гарантировать, что контрольная точка находится в (0,0), вы можете выбрать ее самостоятельно и вручную отредактировать координаты на верхней панели инструментов.
  • После сохранения SVG-файла, который является XML, откройте его с помощью редактора, найдите элемент svg: path и скопируйте содержимое атрибута ‘d’.

Ну, самое близкое, что мне удалось получить с помощью StyledMarker.

Пуля посередине не такая большая, как по умолчанию. Класс StyledMarker просто создает этот URL-адрес и запрашивает google-api для создания маркера .

Из примера использования classа используйте «% E2% 80% A2» в качестве вашего текста, например:

 var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map}); 

Вам нужно будет modyiy StyledMarker.js прокомментировать строки:

  if (text_) { text_ = text_.substr(0,2); } 

поскольку это обрезает текстовую строку до 2 символов.

В качестве альтернативы вы можете создавать собственные изображения маркеров на основе значения по умолчанию с желаемыми цветами и переопределять маркер по умолчанию с таким кодом, как:

 marker = new google.maps.Marker({ map:map, position: latlng, icon: new google.maps.MarkerImage( 'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(0, 24) ) }); 

Привет, вы можете использовать значок SVG и установить цвета. Просмотреть этот код

 /* * declare map and places as a global variable */ var map; var places = [ ['Place 1', "

Title 1

", -0.690542, -76.174856,"red"], ['Place 2', "

Title 2

", -5.028249, -57.659052,"blue"], ['Place 3', "

Title 3

", -0.028249, -77.757507,"green"], ['Place 4', "

Title 4

", -0.800101286, -76.78747820,"orange"], ['Place 5', "

Title 5

", -0.950198, -78.959302,"#FF33AA"] ]; /* * use google maps api built-in mechanism to attach dom events */ google.maps.event.addDomListener(window, "load", function () { /* * create map */ var map = new google.maps.Map(document.getElementById("map_div"), { mapTypeId: google.maps.MapTypeId.ROADMAP, }); /* * create infowindow (which will be used by markers) */ var infoWindow = new google.maps.InfoWindow(); /* * create bounds (which will be used auto zoom map) */ var bounds = new google.maps.LatLngBounds(); /* * marker creater function (acts as a closure for html parameter) */ function createMarker(options, html) { var marker = new google.maps.Marker(options); bounds.extend(options.position); if (html) { google.maps.event.addListener(marker, "click", function () { infoWindow.setContent(html); infoWindow.open(options.map, this); map.setZoom(map.getZoom() + 1) map.setCenter(marker.getPosition()); }); } return marker; } /* * add markers to map */ for (var i = 0; i < places.length; i++) { var point = places[i]; createMarker({ position: new google.maps.LatLng(point[2], point[3]), map: map, icon: { path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z", scale: 0.6, strokeWeight: 0.2, strokeColor: 'black', strokeOpacity: 1, fillColor: point[4], fillOpacity: 0.85, }, }, point[1]); }; map.fitBounds(bounds); });
  

Я немного расширил ответ vokimon , сделав его немного более удобным для изменения других свойств.

 function customIcon (opts) { return Object.assign({ path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', fillColor: '#34495e', fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 1, }, opts); } 

Применение:

 marker.setIcon(customIcon({ fillColor: '#fff', strokeColor: '#000' })); 

Или при определении нового маркера:

 const marker = new google.maps.Marker({ position: { lat: ..., lng: ... }, icon: customIcon({ fillColor: '#2ecc71' }), map: map }); 

начиная с версии 3.11 API Google Maps, объект Icon заменяет MarkerImage . Значок поддерживает те же параметры, что и MarkerImage. Я даже нашел, что это немного более прямолинейно.

Пример может выглядеть так:

 var image = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; 

для получения дополнительной информации проверьте этот сайт

В Internet Explorer это решение не работает в ssl.

Ошибка в консоли:

SEC7111 : безопасность HTTPS скомпрометирована этим ,

Обход проблемы : поскольку один из предложенных здесь пользователей заменил chart.apis.google.com на chart.googleapis.com для URL-адреса, чтобы избежать ошибки SSL.

Вы можете использовать этот код, он отлично работает.

  var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");
var marker = new google.maps.Marker({ position: yourlatlong, icon: pinImage, map: map });

Я пробую два способа создать пользовательский маркер карты Google, этот код запуска, используемый canvg.js, является лучшей совместимостью для браузера. Код комментария не поддерживает IE11 в настоящее время.

 var marker; var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14]; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: { lat: 59.325, lng: 18.070 } }); var markerOption = { latitude: 59.327, longitude: 18.067, color: "#" + "000", text: "ha" }; marker = createMarker(markerOption); marker.setMap(map); marker.addListener('click', changeColorAndText); }; function changeColorAndText() { var iconTmpObj = createSvgIcon( "#c00", "ok" ); marker.setOptions( { icon: iconTmpObj } ); }; function createMarker(options) { //IE MarkerShape has problem var markerObj = new google.maps.Marker({ icon: createSvgIcon(options.color, options.text), position: { lat: parseFloat(options.latitude), lng: parseFloat(options.longitude) }, draggable: false, visible: true, zIndex: 10, shape: { coords: CustomShapeCoords, type: 'poly' } }); return markerObj; }; function createSvgIcon(color, text) { var div = $("
"); var svg = $( '' + '' + '' + '' + text + '' + '' ); div.append(svg); var dd = $(""); var svgHtml = div[0].innerHTML; //todo yao gai bu dui canvg(dd[0], svgHtml); var imgSrc = dd[0].toDataURL("image/png"); //"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize //var svg = '' // + '' // + '' // + '' + text + '' // + ''; //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg); var iconObj = { size: new google.maps.Size(32, 43), url: imgSrc, scaledSize: new google.maps.Size(32, 43) }; return iconObj; };
     Your Custom Marker     

Объедините маркер на основе символа, чей путь рисует контур, с символом «●» для центра. Вы можете подставить точку другим текстом («A», «B» и т. Д.) По желанию.

Эта функция возвращает параметры маркера с заданным текстом (если есть), цветом текста и цветом заливки. Он использует цвет текста для контура.

 function createSymbolMarkerOptions(text, textColor, fillColor) { return { icon: { path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', fillColor: fillColor, fillOpacity: 1, strokeColor: textColor, strokeWeight: 1.8, labelOrigin: { x: 0, y: -30 } }, label: { text: text || '●', color: textColor } }; } 

измените его на chart.googleapis.com для пути, иначе SSL не будет работать

Используя быстрый и Google Maps Api v3, это был самый простой способ, которым я смог это сделать:

 icon = GMSMarker.markerImageWithColor(UIColor.blackColor()) 

надеюсь, что это помогает кому-то.

Циркулярные маркеры

small_red:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC 

small_yellow:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg== 

Small_green:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg== 

small_blue:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC 

small_purple:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg== 

Это 9×9 png изображений.

Как только они попадут на вашу страницу, вы можете просто перетащить их, и у вас будет фактический файл png.

Я долго пытался улучшить рисованный маркер vokimon и сделать его более похожим на Google Maps (и в значительной степени преуспел). Это код, который я получил:

 let circle=true; path = 'M 0,0 C -0.7,-9 -3,-14 -5.5,-18.5 '+ 'A 16,16 0 0,1 -11,-29 '+ 'A 11,11 0 1,1 11,-29 '+ 'A 16,16 0 0,1 5.5,-18.5 '+ 'C 3,-14 0.7,-9 0,0 z '+ ['', 'M -2,-28 '+ 'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)]; 

Я также увеличил его на 0,8.

  • Альтернативы google maps api
  • Как получить доступ к DIV-маркеру API Карт Google Maps v3 и его позиции пикселя?
  • API Google Map - удаление маркеров
  • Получить текущее местоположение на карте Google
  • Как получить событие клика, когда пользователь нажимает на (рабочее) место на карте
  • Геокодирование Google Maps v3 на стороне сервера
  • Android: Регистрация ключей API Карт Google: ключ сертификации MD5
  • ОШИБКА: ошибка API Карт Google: MissingKeyMapError
  • Google Maps v3 частично загружается в верхнем левом углу, событие изменения размера не работает
  • API Карт Google для получения маршрута автобуса
  • Google maps Marker Label с несколькими символами
  • Давайте будем гением компьютера.