`

OpenLayers结合Googlemaps中的Tips

阅读更多
<%@ 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加载google微信影像,完整demo,可直接使用浏览器运行

    首先,要加载Google地图的卫星影像,开发者需要在OpenLayers中设置一个图层,指定其来源为Google Maps的瓦片服务。这通常涉及到创建一个`ol.source.XYZ`对象,并配置其URL指向Google Maps的瓦片服务器。然后,将该源...

    openlayers中文.rar

    - **地图层(Layers)**:OpenLayers中的地图由多个图层组成,每个图层可以是不同的数据源,如卫星图像、地形图或者自定义矢量数据。 - **投影(Projections)**:地图坐标系统转换,OpenLayers支持多种投影方式,...

    openLayers-API中文

    OpenLayers支持多种投影,如EPSG:4326(WGS84,常用于GPS坐标)和EPSG:3857(Spherical Mercator,Google Maps使用)。 4. **控件(Control)**:控件是地图上的交互元素,如缩放滑块、导航工具、定位按钮等。`...

    openLayers geoserver常见问题

    创建谷歌地图效果,OpenLayers提供了兼容Google Maps的图层类型。 OpenLayers API和类用于画点、线、面,如`OpenLayers.Geometry.Point`, `OpenLayers.Geometry.LineString`, `OpenLayers.Geometry.Polygon`。 ...

    openlayers加载本地离线底图瓦片google数据直接运行即可(亲测)

    本案例的主题是“openlayers加载本地离线底图瓦片google数据直接运行即可”,这意味着我们可以通过OpenLayers加载已经下载好的Google Maps离线瓦片数据。离线地图瓦片是一种将大型地图分割成许多小块图片(通常为256...

    基于Openlayers和GoogleMap技术的边检Web地理信息系统研究.pdf

    "基于Openlayers和GoogleMap技术的边检Web地理信息系统研究" 该研究论文旨在设计和实现一个基于Openlayers和GoogleMap技术的边检Web地理信息系统,以满足工作需求,提供全国边检口岸信息的浏览和查询,直接定位或...

    openlayers中文文档2

    在OpenLayers中,Map对象是整个地图应用的核心,包含了地图的视图、图层集合、控件等元素。你可以通过设置地图的中心点、分辨率、投影等属性来定制地图显示。此外,Map对象还提供了交互事件,如单击、双击、拖动等,...

    最新版本openlayers项目源码

    Openlayers是纯javascript开发的一套能够提供地图操作的库。其中引用了Prototype.js和Rico...Openlayers与Google Maps和Visual Earth类似,都能够在现有的web应用中动态加入一些地图服务,使得现有的web应用更加直观。

    openlayers中文文档

    在OpenLayers中,你可以通过设置图层的类型来显示不同类型的地图。例如,瓦片图层(Tile Layer)适合加载大型数据集,因为它会将地图分割成小块进行加载;矢量图层(Vector Layer)可以显示动态数据,如点、线和面,...

    openlayers中文文档1.zip

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图服务,包括WMS、WMTS、TMS等,...所以,这份压缩包中的资料对于OpenLayers的学习者和开发者来说,是不可或缺的参考资料。

    openlayers中文api.zip

    Feature对象则结合了Geometry和属性数据,是地图上可视化的基础。 6. **Geometry**(geometry.html):几何对象用于描述地图上的位置和形状,包括Point(点)、LineString(线串)、Polygon(多边形)等。它们支持...

    ol-source-gmaps-tms:适用于OpenLayers 3的Google Maps Tiles

    增强地图体验,并为其用户和客户提供在不放弃情况下在其项目中使用Google Maps的能力。 调用API ... &lt; link rel =" stylesheet " href =" ...

    在openlayers3上与echarts结合使用示例

    OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问,echarts是百度的开源js图表库,该示例实现了在openlayers的地图‘贴’上echarts的图表,具体可参见我的博客...

    openLayers-API中文版.zip

    2. **地图服务兼容性**:它可以与多种地图服务提供商集成,如Google Maps、Bing Maps、MapQuest、OpenStreetMap等,也可以直接使用WMS(Web Map Service)和WMTS(Web Map Tile Service)。 3. **丰富的地图操作**...

    OpenLayers地图加入google图层

    OpenLayers地图加入google图层 OpenLayers google layer 自己可以用google账号登录申请特定域名的地图key.

    openlayers 中文文档

    OpenLayers中文学习文档,原始文档是.md格式的转换成Html后转换成了chm格式,感谢原文作者。

    vue+openlayers简单示例

    你可以根据需要替换其他地图源,如Google Maps或Bing Maps,或者添加自定义图层。 此外,Vue和OpenLayers结合的好处在于,你可以利用Vue的状态管理(如Vuex)和响应式特性,实现更复杂的功能,如动态加载图层、添加...

    sidebar-v2:响应式侧边栏,其中包含用于Leaflet,OpenLayers,Google Maps等的标签。

    侧边栏v2 用于映射诸如或库的响应式... OpenLayers 2 examples/ol2.html (预览)上的示例代码 谷歌地图 examples/gmaps.html (预览)上的示例代码 执照 sidebar-v2是免费软件,可以根据MIT许可证重新分发。

Global site tag (gtag.js) - Google Analytics