构建可交互的HTML5地图：地标标记和信息窗口

HTML5为我们提供了强大的地图功能，使我们能够在网页上构建可交互的地图应用。通过使用HTML5地图API，我们可以在地图上添加地标标记和信息窗口，为用户提供丰富的地图体验和实用的地理信息。本文将介绍一些构建可交互的HTML5地图的方法和技巧。

<div id="map"></div>

在上述示例中，我们创建了一个id为"map"的div元素，用于容纳地图。

var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.7749, lng: -122.4194},
  zoom: 12
});

在上述示例中，我们创建了一个Google Maps实例，并将其绑定到id为"map"的div元素上。通过设置center属性和zoom属性，我们可以指定地图的初始位置和缩放级别。

var marker = new google.maps.Marker({
  position: {lat: 37.7749, lng: -122.4194},
  map: map,
  title: 'San Francisco'
});

在上述示例中，我们创建了一个地标标记对象，并将其位置设置为旧金山的经纬度。通过设置map属性，我们将地标标记添加到地图上。还可以设置title属性来显示标记的标题。

var infowindow = new google.maps.InfoWindow({
  content: '这是旧金山'
});

marker.addListener('click', function() {
  infowindow.open(map, marker);
});

在上述示例中，我们创建了一个信息窗口对象，并设置其内容为"这是旧金山"。通过调用addListener()方法，我们为地标标记的点击事件添加了一个处理程序，以在点击时打开信息窗口。

通过使用HTML5地图API，我们可以创建交互式的HTML5地图应用。通过初始化地图、添加地标标记和信息窗口，我们可以为用户提供丰富的地图体验和实用的地理信息。让我们充分发挥HTML5地图功能的能力，为我们的应用程序添加可交互的地图功能。