使用JSP表示Google地图中的地址列表可以通过以下步骤实现:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
请将"YOUR_API_KEY"替换为您自己的Google Maps API密钥。如果没有密钥,您可以在Google Cloud控制台中创建一个。
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
// 初始化地图
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点的经纬度
zoom: 12 // 设置地图缩放级别
});
// 地址列表数据
var addresses = [
{name: '地址1', lat: 37.7749, lng: -122.4194},
{name: '地址2', lat: 37.7749, lng: -122.4294},
{name: '地址3', lat: 37.7849, lng: -122.4194}
];
// 在地图上显示地址列表
addresses.forEach(function(address) {
var marker = new google.maps.Marker({
position: {lat: address.lat, lng: address.lng},
map: map,
title: address.name
});
});
}
// 页面加载完成后调用初始化地图函数
google.maps.event.addDomListener(window, 'load', initMap);
</script>
请根据实际需求修改地址列表数据(addresses)和地图的中心点(center)。
<script>
initMap();
</script>
<c:forEach var="address" items="${addresses}">
<p>${address.name}</p>
</c:forEach>
请确保在JSP页面的头部引入JSTL库:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
以上步骤将在JSP页面中显示Google地图中的地址列表,并且通过Google Maps API在地图上标记这些地址。请注意,这只是一个简单的示例,您可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云