AdvancedMarkerView в Vue 3
При использовании Google Maps AdvancedMarkerView не отображается на карте. Эта проблема возникает только при сохранении googleMap в компоненте. При сохранении googleMap в объекте const или window он работает нормально.
Я хотел бы сохранить его в компоненте, чтобы позже добавить или удалить маркеры. Я что-то упустил или это потому, что AdvancedMarkerView бета?
mounted() {
const loader = new Loader({
apiKey: 'key',
version: 'beta',
libraries: ['marker'],
});
loader.load().then((google) => {
this.googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
// const googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
// window.googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
// Marker works fine
new google.maps.Marker({
map: this.googleMap,
position: this.home.position,
})
// Works only with window.googleMap or const googleMap
new google.maps.marker.AdvancedMarkerView({
map: this.googleMap,
position: this.home.position,
content: this.buildContent(this.home),
title: this.home.title
});
});
},
Ответы 1
У меня работает Vue3 с расширенными маркерами, вот мой codesanbox: https://codesandbox.io/s/vue-3-google-map-base-circles-forked-1hbe2p?file=/src/components/GoogleMapLoader. вью
Следует отметить, что в Vue3 кажется, что использование data() мешает this.map, после замены data() на setup() все работает нормально.
Измените свой ключ API, и вы сможете увидеть новые маркеры.
Спасибо что подметил это! Я переключился на Vue3 и воспроизвел проблему, но поиграл и обнаружил, что если я не определяю map в данных, то использование this.map работает для меня, см. мой пример кода. Я не уверен, почему data.map мешает this.map для AdvancedMarkerView в Vue3.
Следует отметить, что в Vue3 кажется, что использование data() мешает работе с this.map, после замены data() на setup() все работает нормально.
Я обнаружил то же самое при определении маркера в data(), он становится реактивным (прокси), и API Google Marker не работает. Как описано в документации «Можно добавить новое свойство непосредственно в this, не включая его в data. Однако свойства, добавленные таким образом, не смогут запускать реактивные обновления».
Привет @jeantix и @Thijs, большое спасибо. В моей реализации с использованием vue3 карта и маркеры устанавливаются с помощью map.value, что, похоже, конфликтует с AdvancedMarkerVue. Не могли бы вы заглянуть, и любые предложения приветствуются, спасибо. Игровая площадка CodeSandbox, показывающая проблему Vue3 AdvancedMarkerView
Привет, @NickB, AdvancedMarkerView не поддерживает передачу прокси в свойство карты, поэтому быстрое исправление состоит в том, чтобы использовать функцию Vue toRaw для извлечения фактического значения карты из прокси, попробуйте передать toRaw(map.value) в свойство карты AdvancedMarkerView и он должен работать.
Ваш codeandbox использует vue2, если вы переключитесь на vue3, вы увидите, что
AdvancedMarkerViewпо какой-то причине не работает. Смотрите здесь для демонстрации. Есть идеи, почему это не работает в vue3?