<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GoogleMap.jsp</title>
<link rel="stylesheet" href="../Script/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="../Style/style.css" type="text/css">
<style type="text/css">
#mymap {
width: 800px;
height: 400px;
border:1px solid gray;
}
</style>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" src="../Script/lib/OpenLayers.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function init(){
var map = new OpenLayers.Map('mymap');
//创建google Map图层对象
var googleLayer = new OpenLayers.Layer.Google("google");
var styleMap = new OpenLayers.StyleMap({
'default': new OpenLayers.Style({
strokeColor: "#333333",
strokeWidth: 1.2,
strokeOpacity: 1
}),
'select': new OpenLayers.Style({
fillColor: "red",
strokeWidth: 10,
pointRadius: 30
})/* ,
'temporary': new OpenLayers.Style({
strokeColor: "yellow"
}) */
});
// 添加图层
map.addLayers([googleLayer]);
var switchControl = new OpenLayers.Control.LayerSwitcher();
map.addControls([switchControl,
new OpenLayers.Control.MousePosition()]);
map.addControl(new OpenLayers.Control.Zoom({"zoomInText":'大', "zoomOutText":'小'}));
map.zoomToMaxExtent();
var ll = null;
var wind = null;
map.events.register('click', this, function(event) {
if (wind != null) {
wind.close();
}
/* if (map.popups.length > 0) {
for (var i = map.popups.length - 1; i >= 0; --i) {
if (map.popups[i] != null) {
map.removePopup(map.popups[i]);
}
}
} */
ll = map.getLonLatFromPixel(event.xy).transform(
map.getProjectionObject(),
new OpenLayers.Projection("EPSG:4326")
);
/* map.setCenter(ll.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
)); */
// popup = new OpenLayers.Popup("chicken",
// ll.transform(
// new OpenLayers.Projection("EPSG:4326"),
// map.getProjectionObject()
// ),
// new OpenLayers.Size(200,100),
// "example popup",
// true);
/* popup = new OpenLayers.Popup.FramedCloud("chicken",
ll.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
),
new OpenLayers.Size(200,100),
"example popup", null,
true);
popup.panMapIfOutOfView = true;
map.addPopup(popup); */
wind = new google.maps.InfoWindow({
content:'<div style="height:100px;width:200px;">aaa<br>aaa</div>',
maxWidth: 400,
position:new google.maps.LatLng(ll.lat,ll.lon),
pixelOffset: new google.maps.Size(0,0),
zIndex: 1000010,
disableAutoPan: true
});
wind.open(OpenLayers.Layer.Google.cache['OpenLayers_Map_2'].mapObject);
});
// 将地图中心点设置为西安市,有外部到地图需要转换,Google地图投影为EPSG:900913
// 从地图到外部也是需要转换的,刚好是反的,每种地图的投影是不一样的
map.setCenter(new OpenLayers.LonLat(
108.88769544660661,
34.33617899255311
).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
));
/* if (map != OpenLayers.Layer.Google.v3) {//
var aa = OpenLayers.Layer.Google.cache['OpenLayers_Map_2'].mapObject;
console.log(aa);
} */
}
</script>
</head>
<body οnlοad="init();">
<div id="mymap" class="smallmap"></div>
<div id="sanjiao" style="position: absolute;display: none;width: 20px;height: 30px;background-color: red;"></div>
</body>
</html>
GoogleMaps-API 写道
https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=zh-cn#InfoWindow