我有一張地圖，它根據搜索填充標記。我正在嘗試使用較新的谷歌地圖功能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 檔案中找到任何具體示例，對于其他提出相同問題的人也是如此。
謝謝你。
uj5u.com熱心網友回復：
沒有setMap()或有其他方法可以呼叫AdvancedMarkerView類來切換其可見性或將其從地圖中洗掉。
雖然不是很清楚，但檔案說：
要從地圖中洗掉標記，請將
markerView.map屬性設定為null。
下面的作業示例：
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.39094933041195, lng: -122.02503913145092 },
zoom: 14,
mapId: "4504f8b37365c3d0",
});
const draggableMarker = new google.maps.marker.AdvancedMarkerView({
map,
position: { lat: 37.39094933041195, lng: -122.02503913145092 },
draggable: true,
title: "This marker is draggable. Click to remove.",
});
draggableMarker.addListener("click", (event) => {
// Remove AdvancedMarkerView from Map
draggableMarker.map = null;
});
map.addListener("click", (event) => {
// Set AdvancedMarkerView position and add to Map
draggableMarker.position = event.latLng;
draggableMarker.map = map;
});
}
window.initMap = initMap;#map {
height: 160px;
}
p {
font-family: Arial;
font-size: 0.75em;
margin: 2px 0;
}<!DOCTYPE html>
<html>
<head>
<title>Draggable Advanced Marker</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<p>Click marker to remove it from map. Click on map to reposition / add marker.</p>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/537316.html