在JSP页面中不使用Leaflet显示地图。可以使用文件

时间:2013-05-23 14:34:43

标签: javascript jsp map offline leaflet

我们正在尝试在Web应用程序中显示离线地图。成功提取所需部分并将其转换为瓷砖。

图块文件夹位于 WEB-INF 内,图块所需的所有文件夹都存在于图块文件夹中。

脚本文件夹中包含

Leaflet 脚本。 css 文件夹中包含 css 脚本。

我的网页的代码段是:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ 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 http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Demon</title>
<link href="${pageContext['request'].contextPath}/css/general.css"
    rel="stylesheet" type="text/css" />
<link href="${pageContext['request'].contextPath}/css/leaflet.css"
    rel="stylesheet" type="text/css" /> 

<script src="${pageContext['request'].contextPath}/script/leaflet.js" language="javascript"></script>
<script src="${pageContext['request'].contextPath}/script/leaflet-src.js" language="javascript"></script>
<script>
function Demo()
{

    var map = L.map('map');
    L.tileLayer('tiles/{z}/{x}/{y}.png').addTo(map);
}
</script>
</head>
<body>
<f:view>
<div id="map" style="width:800px;height:600px;">
<a4j:commandButton value="HIT" onclick="Demo()"></a4j:commandButton>
</div>
</f:view>
</body>
</html>

现在在我的页面上,当我点击 HIT 按钮时,地图部分会被占用并显示在浏览器中分配的空间中但在地图显示中没有任何内容。

由传单和放大/缩小图标提供支持。

没有地图显示。文件夹中存在的图块图像确实包含一个已提取并转换为图块的地图。

因此我无法弄清楚为什么没有出现任何东西。请指导我。

我认为我非常接近于展示一张地图,尽管如此,探索这一点并到达此时仍然是一个地狱之旅。

1 个答案:

答案 0 :(得分:0)

我这样做可能会有所帮助,我在$之前使用\作为转义字符,因此JSP可以理解包含${}的网址,或者它会将其视为空变量?

问题:

var newLayer = new OpenLayers.Layer.OSM("Damascus", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: true});

解决方案:

var newLayer = new OpenLayers.Layer.OSM("Damascus", "tiles/\${z}/\${x}/\${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: true});