我正在尝试在数据库中的 map 上显示多个标记。我已经查看了其他示例，并且 Google 的示例在我的服务器上运行，但似乎无法使其与数据库信息一起使用。
这是我到目前为止所拥有的:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
</head>
<body>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/project" user="root" password="root" />
<sql:query dataSource="${snapshot}" var="result">
SELECT * from House;
</sql:query>
<div id="map"></div>
<script type="text/javascript">
var markerLat, markerLong;
markerLat = [
<c:forEach var="s" items="${result.rows}">
<c:out value="${s.lat}"/>,
</c:forEach>;
markerLong = [
<c:forEach var="s" items="${result.rows}">
<c:out value="${s.lng}"/>,
</c:forEach>;
function initialize() {
var map;
var initlatlng = new google.maps.LatLng(markerLat[0],markerLong[0]);
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(36,5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < markerLat.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markerLat[i], markerLong[i]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA"
async defer></script>
它给我一个错误，说“Uncaught ReferenceError:google is not Define”
有人可以告诉我我做错了什么，或者指导我从数据库向 map 添加多个标记的其他示例吗？
最佳答案
此代码异步加载 Google map javascript API:
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA"
async defer></script>
您应该:
A.同步加载 Google Maps Javascript API:
- 从脚本包含中删除“异步延迟”
- 在使用
google.maps命名空间之前加载 Google Maps Javascript API。
B.异步加载它，并在加载后使用callback参数执行依赖于它的代码:
- 删除此行
google.maps.event.addDomListener(window, 'load',initialize); - 将 API 包含更改为:
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA
&callback=initialize"
async defer></script>
关于javascript - Spring MVC - 从数据库向 Google map 添加多个标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34875416/