Пин-элемент Карт Google
Как и многие, я пытаюсь перейти на AdvancedMarkerElement в API Javascript Google Maps. Я следил за документацией и до сих пор:
<script defer src = "https://maps.googleapis.com/maps/api/js?key = {{env("GOOGLE_JAVASCRIPT_APIKEY")}}&loading=async&callback=gmapinit&v=weekly&libraries=marker"></script>
затем далее для обратного вызова:
async function gmapinit() {//used as callback,required by the api when loading it
const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
const {PinElement} = await google.maps.importLibrary("marker");
GMap = new G_Map();//own wrapper class
}
Успешно работает базовый AdvancedMapMarker на карте с:
let marker = new google.maps.marker.AdvancedMarkerElement({
map: this.map, position: markerposition, title: title,
});
let iconImg = document.createElement("img");
iconImg.src = optargs.icon;
marker.content = iconImg;
Однако здесь нет масштабирования изображения, которое я хотел бы сделать программно. Итак, пытаясь изменить вышеизложенное на
let iconImg = document.createElement("img");
iconImg.src = optargs.icon;
let pin = new PinElement({
scale: 1.5,
content: iconImg,
});
let marker = new google.maps.marker.AdvancedMarkerElement({
map: this.map, position: markerposition, title: title,
content: pin.element
});
Где возникает ошибка:
ReferenceError: PinElement is not defined
Итак, мой вопрос: как загрузить PinElement в код согласно примерам - я явно где-то упускаю что-то простое.
Как я могу создать пример, когда PinElement не определен
Я не вижу этой ошибки в опубликованных вами фрагментах. Как выглядит ваш код с этой ошибкой?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Итак, я заметил небольшую ошибку наследования класса с исправлением, где в документации Google указано:
let pin = new PinElement({
становится
let pin = new google.maps.marker.PinElement({
Код изображения в пине:
let iconImg = document.createElement("img");
iconImg.src = optargs.icon;
iconImg.style = "width:2em";
let pin = new google.maps.marker.PinElement({
scale: 1.25,
background: "#F7D32F",
glyph: iconImg,
});
let marker = new google.maps.marker.AdvancedMarkerElement({
map: this.map, position: markerposition, title: title,
content: pin.element,
gmpClickable: true
});
Ошибка явно заключалась в ссылке на класс google.maps.marker.PinElement и в части исходного вопроса.
Минимальный рабочий пример никогда не мог бы быть получен без исправления того, что было задано изначально, и без видимой ошибки.
Поправка:
Я также заметил состояние Google Docs
<script defer src = "https://maps.googleapis.com/maps/api/js?key = {{env("GOOGLE_JAVASCRIPT_APIKEY")}}&callback=gmapinit&v=weekly&libraries=marker"></script>
что вызвало у меня несколько дней недоумения относительно того, почему это работает на сервере разработки, но не работает вживую. Это произошло потому, что сервер разработки работает медленнее с инструментами отладки и API, загруженным вовремя, однако он не был доступен на более быстром работающем сервере. Поэтому я внес небольшую корректировку, чтобы API карты загружался в верхней части кода и делал его доступным сразу после загрузки, поэтому я перешел на
<script async src = "https://maps.googleapis.com/maps/api/js?key = {{env("GOOGLE_JAVASCRIPT_APIKEY")}}&callback=gmapinit&v=weekly&libraries=marker"></script>
Иногда возникают состояния гонки, но, как правило, лучше подождать времени, чтобы просмотреть мой класс-оболочку GMaps.
Приведите минимальный воспроизводимый пример, демонстрирующий вашу проблему. Если вы используете изображение для своей иконки, я не думаю, что вы захотите использовать
PinElement. Из документации: PinElement представляет собой элемент DOM, состоящий из фигуры и глифа. Фигура имеет тот же стиль выноски, что и в элементе AdvancedMarkerElement по умолчанию.