要在同一地图上使用带有多个标记的Google Maps API,您需要遵循以下步骤:
请将YOUR_API_KEY
替换为您在第1步中获取的API密钥。
initMap
的函数。这个函数将初始化地图并添加多个标记。例如:function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: { lat: -33.9, lng: 151.2 },
});
const locations = [
{ position: { lat: -33.89, lng: 151.21 }, title: "Marker 1" },
{ position: { lat: -33.88, lng: 151.22 }, title: "Marker 2" },
{ position: { lat: -33.87, lng: 151.23 }, title: "Marker 3" },
];
locations.forEach((location) => {
const marker = new google.maps.Marker({
position: location.position,
map: map,
title: location.title,
});
});
}
在这个例子中,我们定义了一个名为locations
的数组,其中包含了多个标记的位置和标题。然后,我们使用forEach
循环遍历这个数组,并为每个位置创建一个新的标记。
<div id="map" style="width: 100%; height: 400px;"></div>
请确保地图元素的大小适合您的页面布局。
完成这些步骤后,您应该可以在同一地图上看到多个标记。您可以根据需要自定义标记的样式、颜色和行为。
领取专属 10元无门槛券
手把手带您无忧上云