在Google Maps API地图上以模式显示每个标记的图像,可以通过以下步骤实现:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"></script>
请将YOUR_API_KEY替换为您在Google Cloud Console中创建项目时生成的API密钥。
<div id="map" style="width: 500px; height: 400px;"></div>
您可以根据需要调整容器的宽度和高度。
var map;
function initMap() {
var markers = [
{
position: {lat: 37.7749, lng: -122.4194},
image: "image1.jpg"
},
{
position: {lat: 34.0522, lng: -118.2437},
image: "image2.jpg"
},
// 添加更多标记...
];
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,
icon: {
url: markers[i].image,
scaledSize: new google.maps.Size(50, 50) // 调整图像大小
}
});
}
}
window.onload = initMap;
通过以上步骤,您可以在Google Maps API地图上以模式显示每个标记的图像。根据您的需求,您可以根据标记的位置和图像URL定义更多的标记,并通过调整图像大小来满足显示需求。
请注意,Google Maps API有一些限制和使用条款,您可以在官方文档中找到更多信息。
领取专属 10元无门槛券
手把手带您无忧上云