使用 Spring MVC 在 Google Map 上顯示標記
[英]Display markers on Google Map using Spring MVC
問題描述
我試圖通過從數據庫中獲取緯度和經度來顯示標記。 問題是我被困在視圖部分。
我將與我的 jsp 文件共享，我想在其中使用 JavaScript API 在 Google 地圖中顯示標記列表。
map.jsp ：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Auxilium Saver</title>
<style>
#map-canvas {
height: 600px;
height: 600px;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>
<script type="text/javascript">
var markerLat, markerLong;
markerLat = [
<c:forEach var="s" items="${listGeo}" varStatus="status">
[<c:out value="${s.latitude}"/>,
</c:forEach>];
markerLong = [
<c:forEach var="s" items="${listGeo}" varStatus="status">
[<c:out value="${s.longitude}"/>,
</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-canvas'), 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>
</head>
</html>
MapController.java :
@Controller
public class MapController {
@Autowired
private GeolocDAO geolocDAO;
@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView getPages(HttpServletRequest request) {
Geolocation geoloc = geolocDAO.get();
ModelAndView model = new ModelAndView("map");
List<Geolocation> listGeo = geolocDAO.list();
model.addObject("listGeo", listGeo);
return model;
}
}
1 個解決方案
解決方案1
1 已采納 2015-05-23 14:09:11
正如評論中所說，您生成的 JS 無效。 在示例中查看如何生成markerLat和markerLong ：
markerLat = [
[51.5286417,
[48.1549108,
[34.0204989,
[41.3947901,
];
markerLong = [
[-0.1015987,
[11.5418358,
[-118.4117325,
[2.1487679,
];
好吧，正如 Google Chrome（或任何其他瀏覽器，當然還有規范）所說，這不是有效的 JavaScript：
因此，在您的map.jsp ，更改以下內容：
markerLat = [
<c:forEach var="s" items="${listGeo}" varStatus="status">
[<c:out value="${s.latitude}"/>,
</c:forEach>];
markerLong = [
<c:forEach var="s" items="${listGeo}" varStatus="status">
[<c:out value="${s.longitude}"/>,
</c:forEach>];
為了這：
markerLat = [
<c:forEach var="s" items="${listGeo}">
<c:out value="${s.latitude}"/>,
</c:forEach>
];
markerLong = [
<c:forEach var="s" items="${listGeo}">
<c:out value="${s.longitude}"/>,
</c:forEach>
];
這樣，將生成有效的 JavaScript，如下所示：
markerLat = [
51.5286417,
48.1549108,
34.0204989,
41.3947901,
];
markerLong = [
-0.1015987,
11.5418358,
-118.4117325,
2.1487679,
];
這是我的測試結果：
解決方案2
0 2020-07-17 13:50:22
我試圖通過從數據庫中獲取經度和緯度來顯示標記。 問題是我被卡在視圖部分。
我將與我的jsp文件共享，我要在其中使用JavaScript API在Google Map中顯示標記列表。
map.jsp ：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Auxilium Saver</title>
<style>
#map-canvas {
height: 600px;
height: 600px;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>
<script type="text/javascript">
var markerLat, markerLong;
markerLat = [
<c:forEach var="s" items="${listGeo}" varStatus="status">
[<c:out value="${s.latitude}"/>,
</c:forEach>];
markerLong = [
<c:forEach var="s" items="${listGeo}" varStatus="status">
[<c:out value="${s.longitude}"/>,
</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-canvas'), 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>
</head>
</html>
MapController.java ：
@Controller
public class MapController {
@Autowired
private GeolocDAO geolocDAO;
@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView getPages(HttpServletRequest request) {
Geolocation geoloc = geolocDAO.get();
ModelAndView model = new ModelAndView("map");
List<Geolocation> listGeo = geolocDAO.list();
model.addObject("listGeo", listGeo);
return model;
}
}
Spring MVC-從數據庫向Google Map添加多個標記
[英]Spring MVC - Adding multiple markers to Google Map from the database
Google Map使用php和jquery動態顯示許多標記
[英]Google map to display many markers dynamically using php and jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.