`
tessykandy
  • 浏览: 80592 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

GIS学习记录(五):OpenLayers显示Google地图

    博客分类:
  • GIS
阅读更多

使用Google api v2版本需要域名对应的key, v3版本api可以直接使用

 

<script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>

 

 

例子:

 

<!DOCTYPE html>
<html>
	<head>
		<title>Google</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<link rel="stylesheet" href="css/pageStyle.css" type="text/css" />

		<script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script>
		<script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
		<script type="text/javascript">
			var map, layer_street;

			function init() {
				// Creating the Map Viewer
				map = new OpenLayers.Map("map",
					{
						maxResolution:'auto',
						maxExtent: new OpenLayers.Bounds(
					        -128 * 156543.03390625,
					        -128 * 156543.03390625,
					        128 * 156543.03390625,
					        128 * 156543.03390625
					    ),
					    displayProjection: new OpenLayers.Projection("EPSG:4326")
					});
				
				layer_street = new OpenLayers.Layer.Google(
				    "Google Streets", // the default
				    {
				    	numZoomLevels: 20 ,
				    	projection: "EPSG:900913",
				    }
				);
				map.addLayer(layer_street);
				
				map.zoomToMaxExtent();
				map.setCenter(new OpenLayers.LonLat(12945347.18614,4859501.42103), 13);
				map.addControl(new OpenLayers.Control.LayerSwitcher());
				map.addControl(new OpenLayers.Control.MousePosition());
			}
		</script>
	</head>

	<body onload="init()">
		<div id="map" class="bigmap"></div>
	</body>
</html>
 

   google使用投影EPSG:900013,因此需要设置projection为EPSG:900913

  设置displayProjection为EPSG:4326,这样地图上鼠标MousePosition显示的经纬度

  css/style.css: OpenLayers-2.11\theme\default\style.css

  css/pageStyle.css:

 

@CHARSET "UTF-8";

body {
	margin: 0;
	padding: 0;
	height: 100%;
}

.bigmap {
	position: absolute;
	left: 0;
	top: 0px;
	padding: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #333;
}
 

参考:

Google (v3) Layer Example http://www.openlayers.org/dev/examples/google-v3.html

 

分享到:
评论

相关推荐

    google map应用实例

    总的来说,Google Map的离线应用实例是一个综合性的开发项目,涵盖了地图数据处理、前端开发、用户交互等多个方面,对于提升开发者在GIS领域的技能非常有帮助。通过学习和实践,我们可以打造出功能强大的离线地图...

    Openlayers轨迹回放功能源码

    OpenLayers 是一个强大的开源JavaScript库,专用于在Web上创建交互式地图应用。它支持多种数据格式和地图服务,如WMS、WMTS等,同时也提供了丰富的地图操作功能,如缩放、平移、图层管理和标记添加等。在这个场景中...

    openLayers geoserver常见问题

    OpenLayers是一个开源JavaScript库,用于显示地图,并且通过网络上的地图服务,如WMS、WFS等。GeoServer是一个开放源代码的服务器,用于共享和编辑地理数据,支持OGC的标准协议。以下是文件中提及的详细知识点: 1....

    电信设备-一种地图信息存储与快速显示方法.zip

    - 基于Web的地图服务:如谷歌地图API、OpenLayers、Leaflet等,提供高效的地图显示框架,支持动态加载、缩放、平移等操作。 - 数据缓存:将常用或热点区域的地图数据缓存在本地,提高访问速度。 - 前后端分离:...

    瓦片地图实现(缓存加载,像素单位平移,缩放)

    瓦片地图实现是一种常见的地理信息系统(GIS)技术,它将庞大的地图数据分割成多个小的、固定尺寸的图像块,称为“瓦片”。这些瓦片通常以网格形式组织,允许高效地在网络上传输和在客户端进行快速显示。在这个场景...

    cheeaunearth我在地球上签到的地图

    在JavaScript开发领域,这种类型的应用通常涉及到地理信息系统(GIS)和Web地图服务(WMS),例如Google Maps API或OpenLayers等库。 该项目的源代码存放在名为 "earth-master" 的压缩包中,这通常是GitHub仓库的...

    openLayers5-API中文版 含jir包

    这个"openLayers5-API中文版 含jir包"提供了OpenLayers 5的中文文档和JIRA包,对于中文开发者来说,是学习和使用OpenLayers进行地图开发的宝贵资源。 OpenLayers 5 API 中文版详细解释了如何利用该库的各种功能。...

    电子地图系统(ASP)

    开发电子地图系统时,通常会结合GIS库如OpenLayers、Leaflet等,以及地图数据提供商如Google Maps API、高德地图API等。这些库和API提供了丰富的地图操作和显示功能,与ASP结合可以构建出功能强大的电子地图平台。 ...

    毕设项目:基于WebGIS实现的全国主要机场航班查询及动态展示系统.zip

    WebGIS的核心在于将GIS的功能通过网络提供给用户,它依赖于HTTP协议和Web服务器,结合JavaScript、CSS和HTML等前端技术以及如Leaflet、OpenLayers、ArcGIS API for JavaScript等GIS库来实现地图展示和交互。...

    USA.rar_电子地图

    - 地图的展示通常依赖于Web GIS技术,如Google Maps API、OpenLayers、Leaflet等开源库。 2. **实现空间功能**: - 描述中的“放大”、“缩小”等功能,是电子地图的关键交互特性。这些功能通常通过缩放因子实现...

    完美的js交互式商场地图

    5. **地图API**:像Google Maps API、Leaflet或OpenLayers这样的开源库提供了丰富的地图功能,如缩放、平移、标记和图层管理。熟练使用这些API可以大大简化地图开发工作。 6. **SVG或Canvas图形**:为了创建自定义...

    离线地图展示demo

    离线地图展示技术是现代GIS(地理信息系统)领域中的一个重要组成部分,它允许用户在没有互联网连接的情况下查看和操作地图数据。这种技术对于那些在偏远地区、网络信号不稳定或需要节省数据流量的用户来说尤其有用...

    1.封面1

    4. GIS集成:利用OpenLayers、Leaflet等开源GIS库,实现在Web上展示地图和地理信息的功能。 四、WebGIS技术应用 1. 地图服务:通过调用Google Maps API或OpenStreetMap等开放地图服务,展示校友分布地图。 2. 空间...

    programing-GIS:代码和笔记本

    6. **地图服务接口**:如ArcGIS API for JavaScript或Google Maps API的示例,展示了如何将GIS集成到Web应用程序中。 通过深入研究这个"programing-GIS:代码和笔记本",学习者不仅可以掌握GIS编程的基本技能,还能...

    点击地图获取经纬度.rar

    1. 地图API:大多数地图服务提供商,如谷歌地图、高德地图、百度地图等,都提供了API供开发者使用。这些API通常包括JavaScript库,允许在网页或应用中嵌入地图,并通过用户交互获取点击位置的经纬度。例如,谷歌地图...

    yu_java_earthxjb_源码.zip

    此外,熟悉GIS库,如GDAL、GeoTools或Google Earth API,可以帮助我们更好地理解yu_java_earthxjb如何处理地图数据。 3. **Java GIS库**:考虑到项目可能是GIS相关,Java提供了一些强大的GIS库,如JTS(Java ...

    基于ASP.NET的厂区电子地图安全管理系统源码.zip

    在本系统中,可能通过集成GIS库,如OpenLayers或Google Maps API,实现地图展示和操作。用户可以查看厂区内各个区域的安全状况,定位关键设备和设施,同时系统可能还具备报警和应急处理功能。 【安全管理系统】 ...

    MapofSonicnetfiberdeploymentinSanFranciscogeneratedfrompublicrecords

    在地图领域,JavaScript通常与库或框架如Leaflet、OpenLayers或Google Maps API结合使用,以在网页上动态呈现地理数据。 在压缩包"sonic_fiber-master"中,我们可以推测包含的文件可能有: 1. `index.html` - 主页...

    GeoServer地图开发解决方案.doc

    - 发布的地图服务可以被各种客户端应用程序调用,如 OpenLayers、Leaflet 或 Google Maps API 等,用于构建互动式地图应用。 9. **监控与优化**: - GeoServer 提供了性能监控和日志记录功能,帮助开发者诊断问题...

    电子地图的拖动和缩放功能

    电子地图的拖动和缩放功能是现代GIS(地理信息系统)和在线地图应用中的核心交互方式,极大地提升了用户对地图信息的浏览体验。在本文中,我们将深入探讨这两个功能的实现原理、技术细节以及相关应用。 首先,让...

Global site tag (gtag.js) - Google Analytics