我有一个基本的 SpringBoot 应用程序。使用 Spring Initializer、JPA、嵌入式 Tomcat、Thymeleaf 模板引擎，并打包为可执行 JAR 文件。 我有一个 Thymeleaf，可以从 Controller 获取 lat 和 lng 变量。 在 Thymeleaf 模板中我有这段代码
<div id="Map" class="map"></div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
var lat = /*[[${lat}]]*/;
var lng = /*[[${lng}]]*/;
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'Map',
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}),
view: new ol.View({
center: [lng, lat],
zoom: 10
})
});
document.getElementById('zoom-out').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
document.getElementById('zoom-in').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
/*]]>*/
</script>
</div>
但是我看到所有 map 都是灰色的，当我看到页面的源代码时，我看到的字面意思是:
<script>
/*<![CDATA[*/
var lat = 31.184349060058594;
var lng = 1.2457042932510376;
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'Map',
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}),
view: new ol.View({
center: [lng, lat],
zoom: 10
})
});
document.getElementById('zoom-out').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
document.getElementById('zoom-in').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
/*]]>*/
</script>
在 Controller 中:
model.addAttribute("lat", getLatitude());
model.addAttribute("lng", getLongitude());
最佳答案
您的代码中存在几个问题。
没有名为“zoom-out”或“zoom-in”的 ID。因此
document.getElementById('zoom-in').onclick = function() {给出错误。请将缩放级别设置为 5。然后您就可以看到 map 了。实际上 map 正在加载，但你看不到它，因为它已经放大了。
这是工作的 html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Map</title>
</head>
<body>
<div id="Map" class="map"></div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
var lat = /*[[${lat}]]*/;
var lng = /*[[${lng}]]*/;
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'Map',
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}),
view: new ol.View({
center: ol.proj.fromLonLat([lon, lat]),
zoom: 5
})
});
document.getElementsByClassName('ol-zoom-out').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
document.getElementsByClassName('ol-zoom-in').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
/*]]>*/
</script>
</div>
</body>
</html>
请从这里找到工作示例 https://gitlab.com/supun/spring-boot-app/commit/856cbbd1e798ab071118d420f9cab02722d219eb
关于javascript - 在 OpenLayers 和 Thymeleaf 中使用 Javascript 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50797074/