<%@ 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
相关推荐
首先,要加载Google地图的卫星影像,开发者需要在OpenLayers中设置一个图层,指定其来源为Google Maps的瓦片服务。这通常涉及到创建一个`ol.source.XYZ`对象,并配置其URL指向Google Maps的瓦片服务器。然后,将该源...
- **地图层(Layers)**:OpenLayers中的地图由多个图层组成,每个图层可以是不同的数据源,如卫星图像、地形图或者自定义矢量数据。 - **投影(Projections)**:地图坐标系统转换,OpenLayers支持多种投影方式,...
OpenLayers支持多种投影,如EPSG:4326(WGS84,常用于GPS坐标)和EPSG:3857(Spherical Mercator,Google Maps使用)。 4. **控件(Control)**:控件是地图上的交互元素,如缩放滑块、导航工具、定位按钮等。`...
创建谷歌地图效果,OpenLayers提供了兼容Google Maps的图层类型。 OpenLayers API和类用于画点、线、面,如`OpenLayers.Geometry.Point`, `OpenLayers.Geometry.LineString`, `OpenLayers.Geometry.Polygon`。 ...
本案例的主题是“openlayers加载本地离线底图瓦片google数据直接运行即可”,这意味着我们可以通过OpenLayers加载已经下载好的Google Maps离线瓦片数据。离线地图瓦片是一种将大型地图分割成许多小块图片(通常为256...
"基于Openlayers和GoogleMap技术的边检Web地理信息系统研究" 该研究论文旨在设计和实现一个基于Openlayers和GoogleMap技术的边检Web地理信息系统,以满足工作需求,提供全国边检口岸信息的浏览和查询,直接定位或...
在OpenLayers中,Map对象是整个地图应用的核心,包含了地图的视图、图层集合、控件等元素。你可以通过设置地图的中心点、分辨率、投影等属性来定制地图显示。此外,Map对象还提供了交互事件,如单击、双击、拖动等,...
Openlayers是纯javascript开发的一套能够提供地图操作的库。其中引用了Prototype.js和Rico...Openlayers与Google Maps和Visual Earth类似,都能够在现有的web应用中动态加入一些地图服务,使得现有的web应用更加直观。
在OpenLayers中,你可以通过设置图层的类型来显示不同类型的地图。例如,瓦片图层(Tile Layer)适合加载大型数据集,因为它会将地图分割成小块进行加载;矢量图层(Vector Layer)可以显示动态数据,如点、线和面,...
OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图服务,包括WMS、WMTS、TMS等,...所以,这份压缩包中的资料对于OpenLayers的学习者和开发者来说,是不可或缺的参考资料。
Feature对象则结合了Geometry和属性数据,是地图上可视化的基础。 6. **Geometry**(geometry.html):几何对象用于描述地图上的位置和形状,包括Point(点)、LineString(线串)、Polygon(多边形)等。它们支持...
增强地图体验,并为其用户和客户提供在不放弃情况下在其项目中使用Google Maps的能力。 调用API ... < link rel =" stylesheet " href =" ...
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问,echarts是百度的开源js图表库,该示例实现了在openlayers的地图‘贴’上echarts的图表,具体可参见我的博客...
2. **地图服务兼容性**:它可以与多种地图服务提供商集成,如Google Maps、Bing Maps、MapQuest、OpenStreetMap等,也可以直接使用WMS(Web Map Service)和WMTS(Web Map Tile Service)。 3. **丰富的地图操作**...
OpenLayers地图加入google图层 OpenLayers google layer 自己可以用google账号登录申请特定域名的地图key.
OpenLayers中文学习文档,原始文档是.md格式的转换成Html后转换成了chm格式,感谢原文作者。
你可以根据需要替换其他地图源,如Google Maps或Bing Maps,或者添加自定义图层。 此外,Vue和OpenLayers结合的好处在于,你可以利用Vue的状态管理(如Vuex)和响应式特性,实现更复杂的功能,如动态加载图层、添加...
侧边栏v2 用于映射诸如或库的响应式... OpenLayers 2 examples/ol2.html (预览)上的示例代码 谷歌地图 examples/gmaps.html (预览)上的示例代码 执照 sidebar-v2是免费软件,可以根据MIT许可证重新分发。