<!DOCTYPE html>
<html>
<head>
<title>我的地图例子</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>我的地图</h1>
<div id="map"></div>
<script>
function initMap() {
var location = { lat: -33.8688,lng: 151.2093 };
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 13,center: location
});
var marker = new google.maps.Marker({
position: location,map: map,title: '我的位置'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
这段代码中，我们引入了Google Maps API，并定义了一个 `initMap()` 函数来初始化地图。通过创建一个 `div` 标签，并给它一个独特的 `id`，我们可以将地图嵌入到网页中。然后，我们在脚本中获取该 `div` 元素，并在其中创建一个新的 `google.maps.Map` 对象。
接下来，我们定义了一个 `location` 变量，它包含了位置的经纬度信息。根据这些信息，我们设置了地图的中心和缩放级别。我们还在地图上设置了一个标记，表示我们的位置。
除此之外，我们还在HTML文件的 `head` 中引入了一些样式，将地图的高度设置为400像素，宽度设置为100%。这样，用户可以在网页中看到一个漂亮的交互式地图。
总的来说，HTML代码示例地图的实现方式不难，但它给我们带来了非常直观、生动的效果，能够提升网页的交互性。如果您有兴趣，不妨也尝试一下自己编写HTML代码实例，让您的网站更加生动有趣吧！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
