我正在使用 google map typescript api 开发一款应用程序,今天启动该应用程序时收到了此警告消息 -> 从 2024 年 2 月 21 日起,google.maps.Marker 将不再可用……
我正在使用 google map typescript api 开发一款应用程序,今天启动该应用程序时我收到了此警告消息 ->
自 2024 年 2 月 21 日起,google.maps.Marker 将不再可用。请改用 google.maps.marker.AdvancedMarkerElement。有关停用的更多信息,请访问 https://developers.google.com/maps/deprecations .
但 AdvancedMarkerElement 不具备 Marker 类的所有属性,这是为什么?我将 @types/google.maps 更新到最新版本,但仍然收到相同的警告。有人知道吗?如何解决?
google.maps.Marker 已弃用(2024 年 2 月 21 日(v3.56))。
文档: https://developers.google.com/maps/documentation/javascript/markers
// Initialize and add the map
let map;
function initMap() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
disableDefaultUI: true, // a way to quickly hide all controls
});
new google.maps.Marker({
position: myLatLng,
map,
});
}
initMap();
文档: https://developers.google.com/maps/documentation/javascript/advanced-markers/overview
额外的步骤 AdvancedMarkerElement
是 创建地图ID .
// Initialize and add the map
let map;
async function initMap_AdvancedMarkerElement() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("AdvancedMarker_MAP"), {
zoom: 4,
center: myLatLng,
disableDefaultUI: true, // a way to quickly hide all controls
mapId: "DEMO_MAP_ID",
});
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: myLatLng,
title: "Uluru",
});
}
initMap_AdvancedMarkerElement();
相关: 异步 JavaScript
重要 - 许多代码想法(例如更改标记图标、标记样式等) - 彻底改变了 VS Legacy(遵循文档)。
p6
p7
<script async
src="https://maps.googleapis.com/maps/api/js?your-key=&loading=async&callback=initMap">
</script>
加载地图 JavaScript API 的更多方法: https://developers.google.com/maps/documentation/javascript/load-maps-js-api
#map {height: 400px;}