`

OpenLayers结合Googlemaps中的Tips

GoogleMaps-Tips;OpenLayers 
阅读更多 
<%@ 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 onload="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
 

 

分享到：
| 改变OpenLayers缩放工具条位置以及大小
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics