在 HTML 中添加 Google 地图并设置指定位置,需要使用 Google Maps API。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
其中,YOUR_API_KEY 是你在 Google Cloud Console 中获取的 API key。
<div id="map" style="width: 100%; height: 400px;"></div>
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
zoom: YOUR_ZOOM_LEVEL
});
其中,YOUR_LATITUDE 和 YOUR_LONGITUDE 分别是要设置的纬度和经度,YOUR_ZOOM_LEVEL 是地图的缩放级别。
var marker = new google.maps.Marker({
position: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
map: map,
title: 'Your Location'
});
其中,YOUR_LATITUDE 和 YOUR_LONGITUDE 分别是标记的纬度和经度,map 是要添加标记的地图对象,title 是标记的标题。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
zoom: YOUR_ZOOM_LEVEL
});
var marker = new google.maps.Marker({
position: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
map: map,
title: 'Your Location'
});
</script>
</body>
</html>
注意,这里的 YOUR_API_KEY、YOUR_LATITUDE、YOUR_LONGITUDE 和 YOUR_ZOOM_LEVEL 都需要替换为实际的值。