<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'mark-shadow.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/Style/style.css" type="text/css">
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var SHADOW_Z_INDEX = 10;
var MARKER_Z_INDEX = 11;
var DIAMETER = 200;
var NUMBER_OF_FEATURES = 15;
var map,layer;
function init(){
map = new OpenLayers.Map('map');
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
layer = new OpenLayers.Layer.Vector(
"Marker Drop Shadows",
{
styleMap: new OpenLayers.StyleMap({
// Set the external graphic and background graphic images.
externalGraphic: "<%=basePath%>Script/img/marker-gold.png",
backgroundGraphic: "<%=basePath%>Script/img/marker_shadow.png",
// Makes sure the background graphic is placed correctly relative
// to the external graphic.
backgroundXOffset: 0,
backgroundYOffset: -7,
// Set the z-indexes of both graphics to make sure the background
// graphics stay in the background (shadows on top of markers looks
// odd; let's not do that).
graphicZIndex: MARKER_Z_INDEX,
backgroundGraphicZIndex: SHADOW_Z_INDEX,
pointRadius: 10
}),
isBaseLayer: true,
rendererOptions: {yOrdering: true},
renderers: renderer
}
);
console.log('<%=basePath%>Script/img/marker-gold.png');
map.addLayers([layer]);
map.addControls([new OpenLayers.Control.LayerSwitcher(),new OpenLayers.Control.MousePosition()]);
map.zoomToMaxExtent();
layer.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-37.96875,54.84375)));
}
</script>
</head>
<body onload="init();">
<h3>这是我的第一个正式程序，终于自己写了一个程序了，真难，希望自己能渡过这个难关，最近压力很大</h3>
<ul>
<li>创建地图对象</li>
<li>创建地图图层【设置扩展图和扩展图的背景图，设置图片相对位置】</li>
<li>创建画布上的点point[程序执行顺序是1、创建地图 2、创建点 3、设置点的位置图]</li>
</ul>
<hr>
<div id="map" class="smallmap"></div>
</body>
</html>