的步骤如下:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
请将YOUR_API_KEY替换为你自己的Google地图API密钥。
var markers = [
{
position: { lat: 40.712776, lng: -74.005974 },
title: 'New York City',
description: 'The Big Apple'
},
{
position: { lat: 34.052235, lng: -118.243683 },
title: 'Los Angeles',
description: 'The City of Angels'
},
// 添加更多标记对象...
];
<div id="map"></div>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 8
});
}
这将在id为"map"的div元素上创建一个地图,并将其中心设置为旧金山,缩放级别为8。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 8
});
for (var i = 0; i < markers.length; i++) {
var marker = new google.maps.Marker({
position: markers[i].position,
map: map,
title: markers[i].title
});
var infoWindow = new google.maps.InfoWindow({
content: markers[i].description
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
}
这将在地图上添加每个标记,并在点击标记时显示相关信息。
以上就是从JS数组向Google地图添加标记的完整步骤。请注意,这只是一个基本示例,你可以根据自己的需求进行定制和扩展。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云