Как использовать значок svg в качестве маркера на Google Maps

У меня есть этот объект для значка маркера в React:

const icon = {
      path: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c- 
      1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
      fillColor: "red",
      fillOpacity: 1,
      scale: 2,
      strokeColor: "red",
      strokeWeight: 1,
};

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

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

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

Маркеры не указывают на точное местоположение только при увеличении масштаба. Я попытался добавить это в объект значка: anchor: new google.maps.Point(15, 42), , но при обновлении страницы он возвращает ошибку: Uncaught ReferenceError: google не определен. Фактическое местоположение находится справа от Варзеи (см. рисунок №3).

вам нужно убедиться, что библиотека Google загружена, прежде чем вы попытаетесь добавить маркеры - поэтому у вас будет `Uncaught ReferenceError: google не определен`. Как вы загружаете SDK карт Google?

Ben Clayton 17.05.2022 15:09

Я использую import {GoogleMap, useLoadScript, Marker} из "@react-google-maps/api";

DisplayName 17.05.2022 15:19

Сообщение об ошибке, вероятно, не имеет никакого отношения к тому факту, что значок маркера указывает не туда, куда вы ожидаете. Как вы пришли к (15, 42)?

MrUpsidown 17.05.2022 15:43

Ну, значок отображается как изображение размером 30 x 42 пикселей, и я попытался скопировать это решение: Developers.google.com/maps/documentation/javascript/examples‌​/…. Больше ничего не нашел...

DisplayName 17.05.2022 15:46
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
2
4
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы правы, вам нужно определить свойство anchor. Самый простой способ — разместить маркер SVG вместе с маркером стандартный в том же месте и соответствующим образом настроить. 15, 42 явно неверно. Не забывайте, что вы также используете scale: 2 на значке.

Я получаю наилучшие результаты, используя new google.maps.Point(12.25,21.5)

function initialize() {

    const myLatLng = new google.maps.LatLng(0,0);
    const mapOptions = {
        zoom: 4,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    const map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    const icon = {
      path: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
      fillColor: "red",
      fillOpacity: 1,
      scale: 2,
      strokeColor: "red",
      strokeWeight: 1,
      anchor: new google.maps.Point(12.25,21.5)
    };

    const marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: icon
    });
    
    const marker2 = new google.maps.Marker({
        position: myLatLng,
        map: map
    });
}

initialize();
#map-canvas {
  height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Что касается ReferenceError: google is not defined, вам нужно будет открыть еще один вопрос и предоставить Минимальный воспроизводимый пример, который позволит воспроизвести проблему.

Привет. Я использую React и не знаю, как определить привязку в React. Должен ли я сделать новый компонент под названием «Маркер»?

DisplayName 17.05.2022 16:29

А как насчет этот ответ?

MrUpsidown 17.05.2022 16:38

Ваши ответы мне очень помогли. Благодарю вас!

DisplayName 17.05.2022 17:49

Другие вопросы по теме

API карт Google использует dragend для обновления одного из нескольких маркеров
Найдите все рестораны в США, которые навсегда закрылись после 1 сентября 2021 года – Текущие данные
Как добавить маркеры карты Google на основе записей элемента <select>, когда пользователь изменяет его
Передать список в матрицу расстояний Google, возвращая только одно значение
Чтение широты и долготы из файла CSV и отображение на карте Google после применения фильтрации к столбцу
Могу ли я сделать веб-сайт доставки Wordpress, который отслеживает местонахождение автомобилей доставки, Live?
IOS - карты Google не отображают все путевые точки, добавленные в браузере. Работает нормально в приложении Google Maps и браузере (с настольным сайтом)
Передать координаты из googlemaps, реагировать от ребенка к родителю в машинописном тексте функционального компонента
Как ограничить автозаполнение Google Places радиусом
Как создать веб-приложение с API Google?