<%@ 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%>" target="_blank" rel="external nofollow" >
<title>My JSP 'mark.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" target="_blank" rel="external nofollow" >
-->
<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" target="_blank" rel="external nofollow" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/Style/style.css" target="_blank" rel="external nofollow" type="text/css">
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map,layer;
function closePopu(){
this.hide();
}
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
var newlayer = new OpenLayers.Layer.Text( "text", { location:"<%=basePath%>Script/textfile.txt"} );
map.addLayer(newlayer);
//marker
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);//将markers層添加到地圖上
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
//marker
var halfIcon = new OpenLayers.Icon("<%=basePath%>images/50653941400a8.jpg",new OpenLayers.Size(100,100),offset);// the icon for this marker
halfIcon.setOpacity(0.6);
var halflonlat = new OpenLayers.LonLat(0,45);// the position of this marker
var halfMark = new OpenLayers.Marker(halflonlat,halfIcon);
halfMark.events.register('click',halfMark,function(event){
alert(halfMark.icon.size+" "+halfMark.icon.url+" lon:"+halfMark.lonlat.lon+" lat:"+halfMark.lonlat.lat);
OpenLayers.Event.stop(event);
});
markers.addMarker(halfMark);
//marker
marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
marker.setOpacity(0.2);
//marker.events.register('mousedown',new OpenLayers.LonLat(90,10),
//marker.events.register('mousedown',this,
marker.events.register('mousedown',marker,
function(evt) {
//alert(marker.icon.url+" lon:"+marker.lonlat.lon+" lat:"+marker.lonlat.lat);
popup = new OpenLayers.Popup.FramedCloud("chicken",
marker.lonlat,
null,
"<div style='font-size:.8em'>URL: " +marker.icon.url +"</div>",
null, true, closePopu);
OpenLayers.Event.stop(evt);
map.addPopup(popup);
});
markers.addMarker(marker);
//控件
map.addControls([
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.PanZoomBar()
]);
map.setCenter(new OpenLayers.LonLat(0,0),0);
map.zoomToMaxExtent();
}
</script>
</head>
<body οnlοad="init();">
<h3>這是我的第二個正式程式，終于自己寫了二個程式了，真難，希望自己能渡過這個難關，最近壓力很大</h3>
<hr>
<div id="map" class="smallmap"></div>
</body>
</html>
![OpenLayers 3 之 添加地圖網格前言示例使用實作總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)