要将变量传递给静态Google图像地图,您需要使用JavaScript来动态生成地图图片的URL,并将其设置为图像元素的src
属性。以下是一个简单的示例,展示了如何根据变量值动态生成Google静态地图图片的URL,并将其显示在网页上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Google Static Map</title>
</head>
<body>
<img id="mapImage" src="" alt="Google Static Map">
<script src="script.js"></script>
</body>
</html>
// 定义变量
var latitude = 40.7128; // 纬度
var longitude = -74.0060; // 经度
var zoomLevel = 13; // 缩放级别
var mapSize = '600x400'; // 地图尺寸
// 构建Google静态地图URL
var mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=${zoomLevel}&size=${mapSize}&key=YOUR_API_KEY`;
// 获取图像元素并设置其src属性
document.getElementById('mapImage').src = mapUrl;
YOUR_API_KEY
替换为您的Google Maps API密钥。您可以在Google Cloud Console上创建和管理API密钥。领取专属 10元无门槛券
手把手带您无忧上云