`

OpenLayers的使用(google地图)

阅读更多

要使用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&amp;v=2&amp;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>
 

  • 大小: 258 KB
分享到:
评论

相关推荐

    OpenLayers3加载谷歌地图

    OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290

    openlayers加载瓦片地图并手动标记坐标点

    3. 加载瓦片地图服务:使用`ol.source.OSM`(OpenStreetMap)或其他地图服务提供商(如Google Maps或Bing Maps)加载瓦片。这里以OpenStreetMap为例: ```javascript var tileLayer = new ol.layer.Tile({ source...

    openlayers5加载谷歌地图.zip

    6. 更改URL:由于谷歌地图的API政策,直接使用官方URL可能需要API密钥,所以实际应用时,你可能需要找到一个公开可用的谷歌地图瓦片服务器,或者使用自己的API密钥。 示例代码可能如下: ```javascript // 创建...

    openlayers3 调用离线谷歌切片地图 示例

    此外,考虑到谷歌地图的版权问题,使用离线谷歌地图切片可能受到限制,因此在实际应用中,你可能需要寻找其他开源地图服务或创建自己的地图切片。 总之,OpenLayers 3调用离线谷歌切片地图涉及对地图容器的设置、...

    openlayers3添加各种地图资源

    加载Google地图需要使用Google Maps JavaScript API,并且可能受到跨域策略的限制。你可以通过代理服务解决这个问题。示例代码如下: ```javascript var googleLayer = new ol.layer.Tile({ source: new ol.source...

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

    这里的`url`属性指定了瓦片的路径,`projection`属性设定了地图使用的坐标系统。在实际使用时,需要将`'file:///path/to/tiles/'`替换为本地瓦片数据的实际路径。 `data`文件夹很可能是存储离线瓦片数据的地方,...

    ol3-google-maps, OpenLayers 谷歌地图 集成.zip

    ol3-google-maps, OpenLayers 谷歌地图 集成 OL3-Google-Maps OpenLayers - 谷歌地图 集成库。 使用创建一个地图,使用 谷歌地图 作为基础地图,更多的信息。特性同步:层( Google,矢量)矢量特征( 样式,几何图形)...

    openlayers加载google微信影像,完整demo,可直接使用浏览器运行

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

    Openlayers使用地图数据.pdf

    此外,OpenLayers还能集成多种地图服务,包括WMS、WFS、Google Maps、KaMap、Microsoft Virtual Earth、NASA WorldWind等,或者使用静态图像作为地图源。 在处理本地瓦片数据时,OpenLayers 提供了一种灵活的方法。...

    openlayers使用地图数据.pdf

    这使得OpenLayers能够处理各种来源的地图数据,例如WMS、WFS、Google Maps、KaMap、Microsoft Virtual Earth以及NASA WorldWind。此外,它还可以接受简单的图像作为地图源,为小型应用程序提供了成本效益高的地图...

    vue+openlayers简单示例

    这个示例中,地图使用了OpenLayers内置的OSM(Open Street Map)源,提供免费的全球地图数据。你可以根据需要替换其他地图源,如Google Maps或Bing Maps,或者添加自定义图层。 此外,Vue和OpenLayers结合的好处...

    OpenLayers地图加入google图层

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

    openLayers geoserver常见问题

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

    openlayers很多特效demo

    7. 地图服务集成:OpenLayers 可以与各种地图服务提供商(如Google Maps、Bing Maps、OpenStreetMap等)集成,展示不同来源的地图数据。 8. 数据源的动态加载和更新:OpenLayers 支持实时数据的加载和更新,这在...

    GeoServer学习——OpenLayers3加载KML地图实现框选

    在本主题中,我们将深入探讨如何使用OpenLayers3,一个流行的JavaScript库,来加载KML(Keyhole Markup Language)地图,并实现地图上的框选功能。KML是一种用于存储地理标记数据的XML格式,常用于Google Earth和...

    谷歌卫星地图在OpenLayers中的应用示例.doc

    它支持多种地图服务,包括谷歌地图。 首先,我们需要准备以下两个基本元素: 1. **OpenLayers库**:从OpenLayers的官方网站(http://www.openlayers.org)下载最新的压缩包。在这个示例中,使用的版本是OpenLayers...

    地图选择及地图偏移解决方案(一)

    每个都有其优缺点,例如谷歌地图提供强大的地图服务但可能需要付费,而OpenStreetMap是开源的,但可能需要更多的自定义工作。 地图偏移问题主要出现在基于不同坐标系统的地图数据上。地球表面被数学化地表示为平面...

    openlayers中文.rar

    - **瓦片(Tiles)**:OpenLayers可以使用瓦片服务来提高地图加载速度,将大地图分割成小块加载。 2. **OpenLayers的使用步骤**: - **引入库文件**:在HTML文件中添加OpenLayers库的链接。 - **创建Map对象**:...

Global site tag (gtag.js) - Google Analytics