`
胆小鬼345X
  • 浏览: 2190 次
  • 性别: Icon_minigender_1
  • 来自: 河南
文章分类
社区版块
存档分类
最新评论

谷歌地图api删除叠加层

    博客分类:
  • js
阅读更多
  大家在做google map api v2常用到的消除地图上所有叠加层的方法:clearOverlays(),当做google map api v3的时候,就是v3没有了v2中常用到的消除地图上所有叠加层的方法:clearOverlays(),本人做了一个清除地图叠加层的例子,希望对大家有帮助
<title>google map 清除叠加层</title>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
        async defer></script>
<script type="text/javascript">
    var map;
    var rectangleRange = null;
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
        });
        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                google.maps.drawing.OverlayType.RECTANGLE
                ]
            }, 
        });
        document.getElementById("delMarker").style.display = "block";
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(delMarker);
        drawingManager.setMap(map);
        drawingManager.addListener('rectanglecomplete', zoomIn);//绘图后执行zoomIn()
    }
    function zoomIn(e, overlay) {
        //删除上一个叠加层
        if (rectangleRange != null) {
            rectangleRange.setMap(null);
        }
        rectangleRange = e;     
    }
    function clearOverlays() {          
       rectangleRange.setMap(null);
    } 
</script>

    </head>
<body onload="initMap()">    
    <div id="map" style="width: 100%; height: 100%"> </div>  
        <input type="button" id="delMarker" onclick="clearOverlays();" value="清除" />         
</body>
    </html> 
  • 大小: 249.4 KB
0
2
分享到:
评论

相关推荐

    Google_MapsAPI_V3_叠加层

    总的来说,Google Maps API V3 提供了丰富的叠加层功能,使得开发者可以构建功能强大且互动性强的网络地图应用。通过熟练掌握叠加层的使用,你可以创建出具有个性化地图元素和丰富交互性的地图项目,为用户提供独特...

    GOOGLE MAPS API V3

    Google Maps JavaScript API V3 是一个强大的工具,允许开发者在网页上集成谷歌地图的功能,提供丰富的交互式地图体验。这个API版本带来了许多改进和新特性,使得开发更加高效和灵活。以下是对主要知识点的详细说明...

    openLayers-API中文版

    - **集成Google Maps、Bing Maps等**:OpenLayers允许你在其上叠加第三方地图服务,如Google Maps或Bing Maps。 通过学习和实践OpenLayers API中文版,开发者可以创建出功能丰富的地图应用,满足各种业务需求,...

    leaflet地图框架常用的中文API.rar,

    通过深入学习Leaflet API中文版文档,开发者不仅能熟练掌握地图的基本操作,还能进一步探索高级特性,如图层叠加、动画效果、自定义插件等,从而在项目中构建出功能强大的交互式地图应用。无论是简单的地图展示还是...

    Arcgis Api for flex 3.6

    - **Map Services**:通过访问Esri提供的Map Services,开发者可以将各种地理数据叠加到地图上,如地形图、卫星图像、人口统计信息等。 - **Geocoding服务**:支持地址解析和反向地址解析,将街道地址转换为坐标点...

    ArcGIS API for JavaScript

    - **第三方地图资源加载**:支持加载来自其他平台的地图资源,如天地图、百度地图、Google 地图等。 以上知识点涵盖了从 ArcGIS API for JavaScript 的基础知识到高级应用的各个方面,为开发者提供了全面的指导和...

    openlayers 2.9.1最新api文档

    16. **地理编码(Geocoding)**:通过集成第三方服务,如Google Maps Geocoding API,可以在OpenLayers中实现地址查找和反向地址解析。 17. **地图切片(Tile Caching)**:对于大型地图数据,可以使用切片缓存提高加载...

    电子地图资料

    - 在Flex中,通过ActionScript调用地图API提供的类库,创建地图对象,设置初始位置、缩放级别和地图类型。 - 通过API调用,可以添加自定义图层,例如叠加气象数据、交通信息或用户上传的照片。 3. **地图控件和...

    在线地图1.4maponline.rar

    1. **在线地图服务**:MapOnline可能提供接入各种在线地图服务的能力,如谷歌地图、百度地图、OpenStreetMap等,用户可以在GIS软件中方便地切换和使用这些服务。 2. **地图数据可视化**:它可能具备强大的地图数据...

    OpenLayer的地图程序

    它允许开发者在网页上轻松地展示、操作和叠加地图数据,支持多种地图服务提供商,如Google Maps、Bing Maps、OpenStreetMap等。在"OpenLayer的地图程序"这个项目中,我们看到其主要目标是利用OpenLayer框架来创建一...

    opanscacle 地图基本操作

    OpenScale可能集成了一些API,如Google Maps API,来实现这些功能。 7. **图层叠加与图层控制**:用户可以通过图层控制面板选择显示哪些图层。你可以自定义图层控制组件,并绑定到地图实例上。 8. **事件处理**:...

    RouteExample.rar_android开发_Java_

    在Android平台上进行应用程序开发时,谷歌地图API是一个非常重要的工具,它允许开发者集成地图功能,为用户提供导航、定位等服务。本项目"RouteExample"是一个关于Android开发的示例,重点在于利用Java语言实现地图...

    map-examples:使用 Maptiks 的地图示例

    Maptiks 是一款强大的地图分析和定制工具,它允许用户通过 JavaScript API 将...通过这三个示例,你可以深入了解地图API的用法,包括数据收集、位置标记和自定义地图样式,这些都是构建现代地图应用不可或缺的技能。

    v3-utility-library-master

    这个库提供了一系列的功能和扩展,使得开发者在使用Google Maps API时能够更轻松地实现各种复杂的地图功能。以下是对这个库的详细解析: 1. **Google Maps JavaScript API V3**:这是Google提供的用于在网页上嵌入...

    openlayer2.13

    它提供了丰富的功能,包括地图叠加层管理、地理坐标系统转换、鼠标位置跟踪、图层控制等,使得开发者能够轻松地将地理信息展示在网页中。标题提到的"openlayer2.13"是OpenLayers库的一个特定版本,而描述中提到的...

    ArcGIS_API_for_Android_案例.pdf

    ### ArcGIS API for Android 案例教程知识点详解 #### I. 配置开发环境 - **Android开发环境** - **JDK6**: 必须先安装Java Development Kit 6,这是Android开发的基础。 - **Eclipse**: 版本需为3.5 (Galileo) ...

    openlayers-master.zip

    7. **服务集成**:OpenLayers与各种地理服务接口良好兼容,如OGC的WMS、WFS,以及Google Maps、Bing Maps等商业地图API。 8. **性能优化**:OpenLayers提供了多线程处理和GPU加速等功能,以优化大规模数据的渲染...

    openlayers

    1. **多图层支持**:开发者可以叠加多个图层,包括卫星图像、地形图、矢量数据等,从而创建具有多种视图的地图应用。 2. **动态图层控制**:用户可以通过API实现图层的添加、删除、隐藏、显示、透明度调整等功能,...

    webgis完整功能例子-MapEasy

    3. **数据叠加**:MapEasy可能支持添加自定义数据层,例如Shapefile、KML、GeoJSON等格式的地理数据,这些数据可以与地图基础图层叠加,展示特定区域的信息。 4. **查询和搜索**:系统可能提供空间查询和属性查询...

Global site tag (gtag.js) - Google Analytics