Маркер точки API Google Maps

В настоящее время я использую значок StyledMarker (значок пузырька по умолчанию с пользовательскими цветами), но я видел, что некоторые сайты используют более компактную «точку» (изображение точечного маркера). У меня вопрос: можно ли заменить стандартный пузырьковый маркер точкой с помощью StyledMarker? Если нет, то как я могу это решить (кстати, решение должно позволять динамическую окраску точек)?


javascript google-maps-api-3 markers
person user1736982    schedule 13.12.2012    source источник
comment
Да, это возможно, но возможно ли это с помощью открытых API? Что я сделал, ну, я использовал Google и stackoverflow, чтобы попытаться найти решение, я прочитал справочный материал для StyledMarker и StyledIcon и просмотрел библиотеку примеров/примеров Google. К сожалению, решение не было найдено, поэтому я разместил этот вопрос :)   -  person user1736982    schedule 13.12.2012

Ответы (3)


arrow_upward
29
arrow_downward

Вы можете объявить значок маркера как символ и настроить его соответствующим образом.

new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: '#00F',
        fillOpacity: 0.6,
        strokeColor: '#00A',
        strokeOpacity: 0.9,
        strokeWeight: 1,
        scale: 7
    }
});

Вы можете поиграть с каждым свойством, чтобы добиться желаемого вида.

введите описание изображения здесь

Если вам нужно что-то более сложное, я сделал (отказ от ответственности: Это был я, так как это сделал я) библиотека для использования иконочных шрифтов (таких как font-awesome или material icons) для рендеринга изображений (используя вспомогательный холст, а затем получая его dataurl).

введите описание изображения здесь

Это в основном фабрика изображений, которую вы можете использовать как

new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: MarkerFactory.autoIcon({
        label: 'f1b9',
        font: 'FontAwesome',
        color: '#CC0000',
        fontsize: 20
    })
});

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

person ffflabs    schedule 01.10.2017

arrow_upward
0
arrow_downward

StyledMarker использует (устаревший) API изображений диаграмм для своих значков. Похоже, что в нем нет "кори"/точки (но ищите сами). В любом случае, если на первый взгляд, он изначально поддерживает только эти два:

  • d_map_xpin_letter
  • d_map_pin_letter

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

person geocodezip    schedule 13.12.2012
comment
Большое спасибо за ваше предложение. Несмотря на то, что d_map_xpin_letter не является значком кори, он все равно может работать. Мне очень нравится возможность добавить звезду плюс любой понравившийся персонаж, что помогает решить некоторые другие проблемы. Большое спасибо (я бы переоценил ваш ответ, но я все еще жду 15 очков репутации). - person user1736982; 26.03.2014

arrow_upward
0
arrow_downward

Вы можете нарисовать себе точку, используя индивидуальный круг: https://developers.google.com/maps/documentation/javascript/examples/circle-simple

person moooeeeep    schedule 17.04.2013
comment
Спасибо за ваше предложение решения, но мне не нравится дизайн / внешний вид настроенных кругов, поэтому охота продолжается :) PS: Я бы повысил ваш ответ, но я все еще жду 15 очков повторения. ДС - person user1736982; 26.03.2014
comment
@ user1736982 посмотрите ответы на эти вопросы: stackoverflow.com/q/11162740/1025391 - person moooeeeep; 26.03.2014