Динамические значки маркеров карты с новым Google Chart API? - PullRequest
Новая
       17

Динамические значки маркеров карты с новым Google Chart API?

2 голосов
/ 19 марта 2019

С годами я создавал маркеры динамической карты Google в Javascript с помощью Google Chart API, описанного здесь:

Динамические значки

Создание маркеров карты не работаетеще несколько дней.Это четко указано в верхней части ссылки:
" Предупреждение. Этот API устарел и его отключение запланировано на 14 марта 2019 года. Вместо этого используйте активно поддерживаемый API Google Charts. "

Их ссылка на новый Google Chart API не дает никакой замены для создания маркера карты, такого как значок с пользовательским цветом и пользовательской буквой в нем (что мне нужно).

Самое близкое, что я нашел в новом API: Настройка маркеров
Но здесь единственный вариант - заменить маркер Google по умолчанию на пользовательское изображение.Так что, похоже, динамическая генерация маркеров не производится.

Возможно, я что-то наблюдал или кто-то знает службу для создания карт Google, таких как маркеры с буквой и собственным цветом.

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Между тем я нашел решение, позволяющее установить определенный цвет и метку внутри маркера. Он работает без API Google Chart (только API Google Maps).

Первая часть решения взята из здесь (см. Ответ от Вокимона): Он принимает путь SVG вместо предопределенного изображения (png). Таким образом, вы можете определить собственный цвет (и даже больше при необходимости): 

function createPin (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',
            fillColor: color,
            fillOpacity: 1,
            strokeColor: '#000',
            strokeWeight: 2,
            scale: 1,
            labelOrigin: new google.maps.Point(0, -30)
        };
    }

"labelOrigin" важен для правильного позиционирования этикетки.

Теперь вы можете создать сам маркер: 

var marker = new google.maps.Marker({
   map: <yourMapInstance>,
   position: new google.maps.LatLng(<latitude>, <longitude>),
   icon: createPin('#F6AC01'),
   label: { 
            text: 'X',
            fontWeight: 'bold'
          },
});

При необходимости описаны более приятные варианты меток здесь .

1 голос
/ 19 марта 2019

Я также заметил, что мои иконки с пользовательскими цветами исчезли. Кажется, есть некоторые предварительно созданные значки, хранящиеся в http://maps.google.com/mapfiles/ms/icons,, такие как http://maps.google.com/mapfiles/ms/icons/green-dot.png enter image description here

Мне удалось найти список значков, размещенных в Google: https://sites.google.com/site/gmapsdevelopment/

...