使用Spring MVC在Google Map上显示标记 [英] Display markers on Google Map using Spring MVC
本文介绍了使用Spring MVC在Google Map上显示标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图通过获取纬度和经度数据库来显示标记。问题是我被困在视图部分。
我将与我的jsp文件共享，我想要在Google Map with JavaScript API中显示标记列表。
map.jsp ：
<％@ page language =javacontentType =text / html; charset = ISO-8859-1pageEncoding =ISO-8859-1％> ;
<％@ taglib uri =http://java.sun.com/jsp/jstl/coreprefix =c％>
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< title> Auxilium Saver< / title>
< style>
＃map-canvas {
height：600px;
height：600px;
margin：0px;
填充：0px
}
< / style>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js？>< / script>
< script type =text / javascript>
var markerLat，markerLong;
markerLat = [
< c：forEach var =sitems =$ {listGeo}varStatus =status>
[< c：out value =$ {s.latitude}/> ;,
< / c：forEach>];
markerLong = [
< c：forEach var =sitems =$ {listGeo}varStatus =status>
[< c：out value =$ {s.longitude}/>，
< / c：forEach>];
函数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;
（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 {
$ b $ @Autowired
private GeolocDAO geolocDAO;
@RequestMapping（value =/，method = RequestMethod.GET）
public ModelAndView getPages（HttpServletRequest请求）{
地理位置geoloc = geolocDAO.get（）;
ModelAndView model = new ModelAndView（map）;
列表< Geolocation> listGeo = geolocDAO.list（）;
model.addObject（listGeo，listGeo）;
返回模型;
}
}
解决方案
正如评论所说，你生成的JS是无效的。在示例中查看 markerLat 和 markerLong 是如何生成的：
< pre class =lang-js prettyprint-override> markerLat = [
[51.5286417，
[48.1549108，
[34.0204989，
[41.3947901，
];
markerLong = [
[-0.1015987，
[11.5418358，
[-118.4117325，
[2.1487679，
];
好的，这是无效的JavaScript，正如谷歌浏览器（或任何其他浏览器，当然，和规范）：
因此，在你的 map.jsp 中，改变它：
markerLat = [
< c：forEach var =sitems =$ {listGeo}varStatus =status> ;
[< c：out value =$ {s.latitude}/> ;,
< / c：forEach>];
markerLong = [
< c：forEach var =sitems =$ {listGeo}varStatus =status>
[< c：out value =$ {s.longitude}/>，
< / c：forEach>];
为此：
markerLat = [
];
markerLong = [
< c：forEach var =sitems =$ {listGeo}>
< c：out value =$ {s.longitude}/>，
< / c：forEach>
];
通过这种方式，将生成一个有效的JavaScript，如下所示：
markerLat = [
51.5286417，
$ b $ 48.1549108，
34.0204989，
41.3947901，
];
markerLong = [
-0.1015987，
11.5418358，
-118.4117325，
2.1487679，
] ;
这是我测试的结果：
I am trying to display markers by getting latitude and longitude frome database. The problem is I'm stuck in the view part.
I'll share with my jsp file where I want to display a list of markers into Google Map with JavaScript API.
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;
}
}
解决方案
As said in comments, your generated JS is invalid. See how markerLat and markerLong are generated in an example:
markerLat = [
[51.5286417,
[48.1549108,
[34.0204989,
[41.3947901,
];
markerLong = [
[-0.1015987,
[11.5418358,
[-118.4117325,
[2.1487679,
];
Well, this is not valid JavaScript, as said by Google Chrome (or any other browser, of course, and the spec):
So, in your map.jsp, change this:
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>];
for this:
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>
];
With this, a valid JavaScript will be generated, like this:
markerLat = [
51.5286417,
48.1549108,
34.0204989,
41.3947901,
];
markerLong = [
-0.1015987,
11.5418358,
-118.4117325,
2.1487679,
];
This is how look result of my test:
这篇关于使用Spring MVC在Google Map上显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
