<%@ 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>goole_map</title>
<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 src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<script type="text/javascript">
var map = null;
function init()
{
//创建map对象，
map = new OpenLayers.Map("map");
map.addControl(new OpenLayers.Control.LayerSwitcher());
//创建google Map图层对象
var gphy = new OpenLayers.Layer.Google(
"Google Physical", //Google Map Physical图层
{type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", //Google Map Streets图层
{numZoomLevels: 20} //设置Google Map的zoom级别
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid", //Google Physical图层
{type: G_HYBRID_MAP, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite", //Google Map Satellite图层
{type: G_SATELLITE_MAP, numZoomLevels: 22}
);
// 添加图层
map.addLayers([gphy, gmap, ghyb, gsat]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.NavToolbar());
/********************************************************/
var vectoruLayer = new OpenLayers.Layer.Vector("Vector Layer", {
styleMap: new OpenLayers.StyleMap({
pointRadius: 3,
strokeColor: "#ff3300",
strokeWidth: 3,
fillOpacity: 0
}) });
map.addLayer(vectoruLayer);
/*
var panel = new OpenLayers.Control.Panel(
{
displayClass: "olControlEditingToolbar"
});
//var options = {handlerOptions: {freehand: true}};//控制是否可以画任意图形
var draw = new OpenLayers.Control.DrawFeature(
vectoruLayer, OpenLayers.Handler.Polygon,
{
displayClass: "olControlDrawFeaturePath",
title: "Draw Lines",
handlerOptions: {freehand: true}
});
panel.addControls([
new OpenLayers.Control.Navigation({title: "Navigate"}),draw ]);
map.addControl(panel);*/
/********************************************************/
/**********************************************************/
var selectControl,drawControl,popup,selectedFeature;
function onFeatureSelect(feature){
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div style='font-size:.8em'>Feature: " + feature.id +"<br>lon "+feature.geometry.bounds.centerLonLat.lon
+",lat"+feature.geometry.bounds.centerLonLat.lat
+"<br>Area: " + feature.geometry.getArea()+"</div>",
null, true, clopsePopup);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature){
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function clopsePopup(feature){
selectControl.unselect(selectedFeature);
}
//点击事件
selectControl = new OpenLayers.Control.SelectFeature(vectoruLayer,
{
onSelect:onFeatureSelect,
onUnselect:onFeatureUnselect
});
drawControl =new OpenLayers.Control.DrawFeature(vectoruLayer,OpenLayers.Handler.Polygon)
controls ={
select:selectControl,
line:drawControl
}
for(var key in controls){//循环的只是键
map.addControl(controls[key]);
}
/**********************************************************/
// 放大到全屏
map.zoomToMaxExtent();
}
function toggleControl(element){
for(var key in controls){
var control = controls[key];
if(element.value==key && element.checked){
control.activate();//激活选择工具，否则不可用
}else{
control.deactivate();
}
}
}
</script>
</head>
<body onload="init();">
<div id="map" class="smallmap"></div>
<ul>
<li>
<input type="radio" name="type" value="none" id="noneToggle" checked="checked" onclick="toggleControl(this);"/>
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);"/>
<label for="pointToggle">draw line</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle" onclick="toggleControl(this);" />
<label for="selectToggle">select polygon on click</label>
</li>
</ul>
</body>
</HTML>