要使用google地图,先要获得google的密钥,可以使用了之后,我们就可以通过OpenLayers来操作,对google地图进行布局,增加事件什么的。下面就是一个简单的例子,类似定位。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Test OpenLayers</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAiaPj-nq6xmaIlKL7JGMDMBQuGyTEa3GqgqWF5HGZOViJUH6UdRSMFvsEDx1rNkGSOnD2AI7xXht7xg'></script>
<script src="<%=request.getContextPath()%>/js/openlayers/lib/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
var map;
function setMarker(point, name_mobile,info){
var mobile = name_mobile.split(',')[0];
var name = name_mobile.split(',')[1];
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var lonLatMarker = point;
var feature = new OpenLayers.Feature(markers, lonLatMarker);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(200, 200),maxSize: new OpenLayers.Size(280, 280) });
feature.data.popupContentHTML = "<div style='font-size:.8em'>"+mobile+"("+name+")"+"位于:<br/>"+info+"</div><p/><center><img style='vertical-align: middle;' src='<%=request.getContextPath()%>/img/tools/button_legend.gif'/><a class='menu_font2' href='###' onclick='javascript:sendsms("+"\""+name_mobile+"\""+");'>短信</a></center>";
feature.data.overflow = "hidden";
size = new OpenLayers.Size(50,50);
calculateOffset = function(size) {return new OpenLayers.Pixel(-(size.w/2), -size.h); };
icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/msn.png',size, null,calculateOffset);
var marker = new OpenLayers.Marker(lonLatMarker, icon);
marker.feature = feature;
popup = feature.createPopup(true);
map.addPopup(popup);
popup.show();
var markerClick = function(evt) {
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
markers.addMarker(marker);
}
function init() {
map = new OpenLayers.Map('map', {allOverlays: true});
// map.addControl(new OpenLayers.Control.LayerSwitcher());
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
map.addLayer(gmap);
vlayer = new OpenLayers.Layer.Vector("Editable");
map.addLayer(vlayer);
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
map.setCenter(new OpenLayers.LonLat(114.062, 22.54), 12);
setMarker(new OpenLayers.LonLat(114.062, 22.54),"12510827609,hhw","西丽");
/*
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/mobile.png');
var icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/mobile.png');
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(113.96052,22.59158),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(114.062, 22.54),icon.clone()));
*/
}
</script>
<style type="text/css">
#map {
width: 100%;
height: 100%;
border: 2px solid black;
background-color: #FFFFFF;
}
</style>
</head>
<body onload="init()">
<h1>OpenLayers Test</h1>
<table width="100%" height="400">
<tr><td width="100%" height="100%">
<div id="map"></div>
</td></tr>
</table>
</body>
</html>
相关推荐
OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290
3. 加载瓦片地图服务:使用`ol.source.OSM`(OpenStreetMap)或其他地图服务提供商(如Google Maps或Bing Maps)加载瓦片。这里以OpenStreetMap为例: ```javascript var tileLayer = new ol.layer.Tile({ source...
6. 更改URL:由于谷歌地图的API政策,直接使用官方URL可能需要API密钥,所以实际应用时,你可能需要找到一个公开可用的谷歌地图瓦片服务器,或者使用自己的API密钥。 示例代码可能如下: ```javascript // 创建...
此外,考虑到谷歌地图的版权问题,使用离线谷歌地图切片可能受到限制,因此在实际应用中,你可能需要寻找其他开源地图服务或创建自己的地图切片。 总之,OpenLayers 3调用离线谷歌切片地图涉及对地图容器的设置、...
加载Google地图需要使用Google Maps JavaScript API,并且可能受到跨域策略的限制。你可以通过代理服务解决这个问题。示例代码如下: ```javascript var googleLayer = new ol.layer.Tile({ source: new ol.source...
这里的`url`属性指定了瓦片的路径,`projection`属性设定了地图使用的坐标系统。在实际使用时,需要将`'file:///path/to/tiles/'`替换为本地瓦片数据的实际路径。 `data`文件夹很可能是存储离线瓦片数据的地方,...
ol3-google-maps, OpenLayers 谷歌地图 集成 OL3-Google-Maps OpenLayers - 谷歌地图 集成库。 使用创建一个地图,使用 谷歌地图 作为基础地图,更多的信息。特性同步:层( Google,矢量)矢量特征( 样式,几何图形)...
首先,要加载Google地图的卫星影像,开发者需要在OpenLayers中设置一个图层,指定其来源为Google Maps的瓦片服务。这通常涉及到创建一个`ol.source.XYZ`对象,并配置其URL指向Google Maps的瓦片服务器。然后,将该源...
此外,OpenLayers还能集成多种地图服务,包括WMS、WFS、Google Maps、KaMap、Microsoft Virtual Earth、NASA WorldWind等,或者使用静态图像作为地图源。 在处理本地瓦片数据时,OpenLayers 提供了一种灵活的方法。...
这使得OpenLayers能够处理各种来源的地图数据,例如WMS、WFS、Google Maps、KaMap、Microsoft Virtual Earth以及NASA WorldWind。此外,它还可以接受简单的图像作为地图源,为小型应用程序提供了成本效益高的地图...
这个示例中,地图使用了OpenLayers内置的OSM(Open Street Map)源,提供免费的全球地图数据。你可以根据需要替换其他地图源,如Google Maps或Bing Maps,或者添加自定义图层。 此外,Vue和OpenLayers结合的好处...
OpenLayers地图加入google图层 OpenLayers google layer 自己可以用google账号登录申请特定域名的地图key.
在做webgis应用过程中,难免遇到使用多种地图作为底图,比如天地图、谷歌地图、高德地图等,由于各地图使用的坐标系不一致,所以在动态切换底图时,通常需要处理地图容器中已存在的矢量数据,接下来我们以天地图和...
创建谷歌地图效果,OpenLayers提供了兼容Google Maps的图层类型。 OpenLayers API和类用于画点、线、面,如`OpenLayers.Geometry.Point`, `OpenLayers.Geometry.LineString`, `OpenLayers.Geometry.Polygon`。 ...
7. 地图服务集成:OpenLayers 可以与各种地图服务提供商(如Google Maps、Bing Maps、OpenStreetMap等)集成,展示不同来源的地图数据。 8. 数据源的动态加载和更新:OpenLayers 支持实时数据的加载和更新,这在...
它支持多种地图服务,包括谷歌地图。 首先,我们需要准备以下两个基本元素: 1. **OpenLayers库**:从OpenLayers的官方网站(http://www.openlayers.org)下载最新的压缩包。在这个示例中,使用的版本是OpenLayers...
每个都有其优缺点,例如谷歌地图提供强大的地图服务但可能需要付费,而OpenStreetMap是开源的,但可能需要更多的自定义工作。 地图偏移问题主要出现在基于不同坐标系统的地图数据上。地球表面被数学化地表示为平面...
在本主题中,我们将深入探讨如何使用OpenLayers3,一个流行的JavaScript库,来加载KML(Keyhole Markup Language)地图,并实现地图上的框选功能。KML是一种用于存储地理标记数据的XML格式,常用于Google Earth和...
- **瓦片(Tiles)**:OpenLayers可以使用瓦片服务来提高地图加载速度,将大地图分割成小块加载。 2. **OpenLayers的使用步骤**: - **引入库文件**:在HTML文件中添加OpenLayers库的链接。 - **创建Map对象**:...