`

OpenLayers调用google Map

JavaScriptgoogle 
阅读更多

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>goole_map</title>

<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" type="text/css">

    <link rel="stylesheet" href="<%=basePath%>/Style/style.css" type="text/css">

<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>

    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>

   <script  type="text/javascript">

     var map = null;

     function init()

     {

         //创建map对象，

         map = new OpenLayers.Map("map");

         map.addControl(new OpenLayers.Control.LayerSwitcher());

         //创建google Map图层对象

         var gphy = new OpenLayers.Layer.Google(

             "Google Physical",                      //Google Map Physical图层

             {type: G_PHYSICAL_MAP}

         );

         var gmap = new OpenLayers.Layer.Google(

             "Google Streets",                       //Google Map Streets图层

             {numZoomLevels: 20}                     //设置Google Map的zoom级别

         );

         var ghyb = new OpenLayers.Layer.Google(

             "Google Hybrid",                        //Google Physical图层

             {type: G_HYBRID_MAP, numZoomLevels: 20}

         );

         var gsat = new OpenLayers.Layer.Google(

             "Google Satellite",                     //Google Map Satellite图层

             {type: G_SATELLITE_MAP, numZoomLevels: 22}

         );

 

         // 添加图层

         map.addLayers([gphy, gmap, ghyb, gsat]);

         map.addControl(new OpenLayers.Control.LayerSwitcher());

         map.addControl(new OpenLayers.Control.PanZoomBar());

         map.addControl(new OpenLayers.Control.NavToolbar());

         

         /********************************************************/

         var vectoruLayer = new OpenLayers.Layer.Vector("Vector Layer", {

styleMap: new OpenLayers.StyleMap({

pointRadius: 3,

strokeColor: "#ff3300",

strokeWidth: 3,

fillOpacity: 0

}) });  

map.addLayer(vectoruLayer);

 

 

/*

var panel = new OpenLayers.Control.Panel(

{

displayClass: "olControlEditingToolbar" 

});  

 

//var options = {handlerOptions: {freehand: true}};//控制是否可以画任意图形

var draw = new OpenLayers.Control.DrawFeature(

vectoruLayer, OpenLayers.Handler.Polygon,

{

displayClass: "olControlDrawFeaturePath", 

title: "Draw Lines",

handlerOptions: {freehand: true}

});  

panel.addControls([

new OpenLayers.Control.Navigation({title: "Navigate"}),draw ]); 

map.addControl(panel);*/

         /********************************************************/

         

         

         /**********************************************************/

         var selectControl,drawControl,popup,selectedFeature;

         function onFeatureSelect(feature){

         selectedFeature = feature;

         popup = new OpenLayers.Popup.FramedCloud("chicken", 

                feature.geometry.getBounds().getCenterLonLat(),

                null,

                "<div style='font-size:.8em'>Feature: " + feature.id +"<br>lon "+feature.geometry.bounds.centerLonLat.lon

                +",lat"+feature.geometry.bounds.centerLonLat.lat

                +"<br>Area: " + feature.geometry.getArea()+"</div>",

                null, true, clopsePopup);

         feature.popup = popup;

         map.addPopup(popup);

         }

         

         function onFeatureUnselect(feature){

         map.removePopup(feature.popup);

         feature.popup.destroy();

         feature.popup = null;

         }

         

         function clopsePopup(feature){

         selectControl.unselect(selectedFeature);

         }

         //点击事件

         selectControl = new OpenLayers.Control.SelectFeature(vectoruLayer,

        {

       onSelect:onFeatureSelect,

       onUnselect:onFeatureUnselect

       });

      drawControl =new OpenLayers.Control.DrawFeature(vectoruLayer,OpenLayers.Handler.Polygon)

      controls ={

      select:selectControl,

      line:drawControl

      }

     

      for(var key in controls){//循环的只是键

       map.addControl(controls[key]);

        }

         /**********************************************************/

         

         // 放大到全屏

         map.zoomToMaxExtent();

     }

     

     

        function toggleControl(element){

for(var key in controls){

var control = controls[key];

if(element.value==key && element.checked){

control.activate();//激活选择工具，否则不可用

}else{

control.deactivate();

}

}

}

   </script>

  </head>

  <body onload="init();">

   <div id="map" class="smallmap"></div>

   <ul>

    <li>

         <input type="radio" name="type" value="none" id="noneToggle" checked="checked" onclick="toggleControl(this);"/>

         <label for="noneToggle">navigate</label>

     </li>

     <li>

         <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);"/>

         <label for="pointToggle">draw line</label>

     </li>

     <li>

       <input type="radio" name="type" value="select" id="selectToggle"  onclick="toggleControl(this);" />

       <label for="selectToggle">select polygon on click</label>

  </li>

   </ul>

  </body>

 </HTML>

 

分享到：
| js中局部变量必须用var去声明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    这个示例专注于使用OpenLayers 3调用离线谷歌切片地图，这是一个非常实用的功能，特别是对于那些无法连接到互联网或者希望在本地环境中运行地图应用的用户。 首先，我们需要了解OpenLayers 3的基本概念。OpenLayers...

    openlayers 调用 arcgis server wms服务简单图解

    在本文中，我们将深入探讨如何使用OpenLayers调用ArcGIS Server提供的WMS（Web Map Service）服务。WMS是一种开放标准，允许用户请求地理空间数据并以图像的形式返回，这在构建交互式地图应用时非常有用。ArcGIS ...

    openLayers geoserver常见问题

    var map = new OpenLayers.Map('mapDiv'); var layer = new OpenLayers.Layer.WMS("名字", "URL", {layers: '图层名'}, {maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)}); map.addLayer(layer); map....

    OpenLayers实例

    OpenLayers支持多种地图服务，包括WMS、WMTS、TMS、GeoJSON等，使得开发者能够轻松地接入各种地图数据源，如谷歌地图、Bing Maps、OpenStreetMap等。 在“OpenLayers实例”中，我们可以推测这个项目是基于...

    Openlayers轨迹回放功能源码

    2. **创建地图**：初始化OpenLayers地图，设置基图服务（如OpenStreetMap、Google Maps等），并定义地图的视图。例如： ```javascript const map = new ol.Map({ target: 'map', view: new ol.View({ center: ...

    geoserver与OpenLayers配置入门

    5. **编辑HTML**：在HTML中添加Google Maps API的Key，通过OpenLayers调用Google Maps服务，将Google Maps图层添加到地图中。 6. **查看效果**：保存并刷新HTML页面，确认Google Maps图层已成功加载。 **GEOSERVER...

    PostGIS, GeoDjango+OpenLayers 三者结合实现webgis

    使用OpenLayers可以快速地将交互式地图嵌入到网页中，支持多种地图源，如Google Maps、Bing Maps、OpenStreetMap等。它非常适合用于WebGIS开发。 当我们将PostGIS、GeoDjango与OpenLayers结合起来时，可以构建一个...

    openlayers资料收集

    #### 四、使用 OpenLayers 调用本地瓦片数据 **1. 概述** 当使用 OpenLayers 来加载本地瓦片数据时，通常会涉及到几个关键步骤： - 确定缩放级别范围 - 创建地图对象 - 设置投影坐标 - 管理矢量数据的投影变换 - ...

    OpenLayers附加js支持，jqurey，drawTree

    例如，OpenLayers的`ol.Map`对象用于创建地图，而`ol.View`设置地图的初始视图。jQuery的选择器和方法则用于操作DOM元素，而DrawTree的相关函数用于在地图上绘制和处理树状结构。 总的来说，这个项目结合了...

    mirrors-OpenLayers-master_openlayers_bean2eh_

    7. **地图服务集成**：OpenLayers可以直接与各种地图服务提供商（如Google Maps、Bing Maps、OpenStreetMap等）集成，提供丰富的地图数据。 8. **自定义样式**：通过CSS和SLD（Styled Layer Descriptor），开发者...

    Openlayers测距测面积

    本文将详细介绍如何在OpenLayers中实现这一功能，特别是在Google地图下进行投影变换的处理。 首先，我们需要创建一个Vector图层来存储用户绘制的几何对象，例如路径和多边形。以下代码展示了如何创建这个图层并将其...

    基于openLayers2所写的热力图

    5. **渲染热力图**: 当数据点被添加到图层后，OpenLayers会自动调用样式函数，为每个点渲染相应的颜色，从而形成热力图的效果。 6. **交互与更新**: 用户可以通过交互方式调整热力图的显示，例如改变颜色范围、透明...

    google离线API调用google瓦片叠加TMS瓦片源码及数据

    本文将深入探讨如何使用Google离线API调用Google瓦片，并叠加TMS（Tile Map Service）瓦片源码和数据。 首先，"google离线API"是指开发者通过本地存储的瓦片数据来模拟在线Google Maps API的行为。这种技术通常涉及...

    Openlayers实现扩散的动态点（水纹效果）

    为了启动动画，我们需要调用`addRandomFeature()`和`flash()`函数。在实际应用中，你可能需要根据实际需求调整扩散效果，例如改变扩散速度、形状或者颜色。 总结来说，OpenLayers 实现扩散的动态点（水纹效果）涉及...

    openlayer3加载谷歌地图例.rar

    最后，为了让用户能够在不同地图类型之间切换，你可以创建一个按钮组，通过调用`map.getLayers().getArray()`获取所有图层，然后根据用户选择动态显示或隐藏相应的图层。 WebGIS（Web地理信息系统）是基于Web的地理...

    proj4_iClientforOpenlayerDemo

    接着，使用proj4定义新的坐标系，这通常涉及EPSG代码，例如EPSG:4326代表WGS84坐标系，而EPSG:3857是Web Mercator坐标系，常用于在线地图服务如Google Maps和OpenStreetMap。然后，通过iClient for OpenLayers的API...

    地图 flash map

    7. **GIS库集成**：为了简化开发过程，开发者常常会使用GIS库，这些库提供了与地图服务（如Google Maps API、Bing Maps API或OpenStreetMap）交互的功能。在Flash环境中，有专门为Flash设计的GIS库，它们提供API供...

    MapDownloader

    MapDownloader是一款专为地图下载设计的强大工具，它涵盖了多种知名地图服务提供商，包括百度、谷歌、高德、腾讯以及必应。这款应用的核心功能在于帮助用户便捷地获取这些地图服务的二维地图和卫星影像，以便在离线...

    world map demo

    地图部分，通常会使用开源的地图库如OpenLayers或Leaflet，或者商业地图服务如Google Maps API、Bing Maps API等。这些地图库提供了JavaScript接口，能够方便地在网页上嵌入地图，并且支持自定义图层、标注、地理...

    基于GeoServer开发WebGIS相关文档

    《稻歌Google Map截获器V1.1帮助文档.pdf》可能是关于一款工具的使用指南，该工具可能用于抓取Google Maps的卫星图像或者其他地图数据，为开发者提供离线使用或者进一步处理的可能性。这种工具在没有网络连接或者...

Magicbox
Global site tag (gtag.js) - Google Analytics