Google Maps 是一个基于网页的地图应用程序,它允许用户在地图上查看位置、获取路线、搜索兴趣点等。在 Google Maps 上显示标记(Marker)是一种常见的功能,用于指示特定位置。当需要在地图上显示某个半径范围内的数据时,可以通过从 JSON 数据源获取信息,并在地图上相应位置添加标记来实现。
以下是一个简单的示例代码,展示如何使用 JavaScript 和 Google Maps API 在地图上根据 JSON 数据显示标记:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Marker from JSON</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
// 假设这是从服务器获取的 JSON 数据
var jsonData = [
{"name": "Location 1", "lat": -34.397, "lng": 150.644},
{"name": "Location 2", "lat": -33.890542, "lng": 151.274856}
];
jsonData.forEach(function(location) {
var marker = new google.maps.Marker({
position: {lat: location.lat, lng: location.lng},
map: map,
title: location.name
});
});
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="height: 500px; width: 100%;"></div>
</body>
</html>
请注意,你需要将 YOUR_API_KEY
替换为你自己的 Google Maps API 密钥,并确保它已经启用了 JavaScript API 服务。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云