openlayers+google

最新推荐文章于 2023-06-11 00:29:41 发布

iteye_17205

最新推荐文章于 2023-06-11 00:29:41 发布

阅读量199

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： javascript java ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_17205/article/details/82305442

学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用OpenLayers集成地图到Web应用中。步骤包括下载OpenLayers库、配置项目文件夹、创建示例JSP页面并加载Google地图图层。通过JavaScript设置地图中心点和缩放级别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先下载openlayers（http://openlayers.org/download/）；
2.复制img目录、lib目录、theme目录至项目；
3.开发一个简单实例
jsp页面：
<%@ page language="java" pageEncoding="GBK"%>
<html>
<html:base />
<head>
<base href="${sessionScope.full_path}">
<title>${sessionScope.title}</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="${sessionScope.keywords}">
<meta http-equiv="description" content="${sessionScope.description$}">
<style type="text/css">
.olLayerGoogleCopyright{margin-bottom: -18px;}
</style>
<script type="text/javascript" src="${sessionScope.cmpf_path}/js/lib/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.4&sensor=false"></script>
<script type="text/javascript" src="${sessionScope.path}/pnm/openLayers/lib/Firebug/firebug.js"></script>
<script type="text/javascript" src="${sessionScope.path}/pnm/openLayers/OpenLayers.js"></script>
<script type="text/javascript" src="${sessionScope.path}/pnm/openLayers/js/frame.js"></script>
<script type="text/javascript">
var map;
var centerPoint = '113.32162,23.111130472636';
var zoom = 10;
$(function(){
var centerPointMap = $('#centerPoint').val();
centerPoint = centerPointMap?centerPointMap:centerPoint;
var zoomMap = $('#zoomMap').val();
zoom = zoomMap?zoomMap:zoom;
});
</script>
</head>
<body οnlοad="initSmap();">
<input type="hidden" id="centerPoint" value=""/>
<input type="hidden" id="zoomMap" value=""/>
<div id="map" style="width: 700;height: 500"></div>
</body>
</html>
js页面：
function initSmap() {
var lon = centerPoint.split(',')[0];
var lat = centerPoint.split(',')[1];
var point = new OpenLayers.LonLat(lon,lat)
.transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913"));
map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());
var gmap = new OpenLayers.Layer.Google("街道地形",{numZoomLevels: 20,visibility: false});
map.addLayers([gmap]);
map.setCenter(point, zoom);
}