标签: google-maps-advanced-marker-element

我有一张地图，它根据搜索填充标记。我正在尝试使用较新的谷歌地图功能，AdvancedMarkerView以便我可以用自定义 HTML 填充它 - 但是，随着我的搜索更新，我想刷新旧标记并在需要时放置新标记......但我不能为了我的生活弄清楚如何？https://developers.google.com/maps/documentation/javascript/reference/advanced-markers

下面放置自定义标记。有用。

const content = document.createElement('div');
content.className = 'marker-title';
content.textContent = item.title;

const marker = new google.maps.marker.AdvancedMarkerView({
  map,
  position: item.position,
  content
});

通常对于标记，就像在旧标记中一样，我已经使用以下代码删除了它们，markers.forEach((marker) => marker.setMap(null))但这似乎不适用于高级标记。由于创建高级标记时返回的标记指向该元素，因此我也尝试思考marker.remove()HTML 元素将成为目标，但没有雪茄。

当涉及到高级标记时，​​我无法在 Google API 文档上找到任何具体示例，对于其他提出相同问题的人来说也是如此。

我创建了一个函数，可以在地图上放置一组图钉。我已经为所有标记添加了单击功能，可以将地图重新​​置于新位置的中心并缩放到适当的位置。这部分工作没有问题。

上面的鼠标悬停事件侦听器将不起作用，我不明白为什么。有什么我忽略的吗？

function setMarker(loc,pos){
    pos = { lat: pos['lat'], lng: pos['lng'] }; 
    let marker = new AdvancedMarkerElement({
        map: map,
        position: pos,
        title: loc
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
        console.log('Marker has been moused over.');
    });

    google.maps.event.addListener(marker, 'click', function() {
        map.panTo({ lat: jp[loc]['lat'], lng: jp[loc]['lng']} );
        animZoom(jp[loc]['zoom']);
        $location = loc;
    });
}

使用 Google 地图时，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 …