`
desert3
  • 浏览: 2159461 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Google Map限制用户可以使用的地图范围

阅读更多
参考:http://econym.org.uk/gmap/range.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html
>
  <head
>
    <title
>Google Maps</title
>
    <script
 src
="
http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw
" 
type
="text/javascript"
></script
>
  </head
>
  <body
 onunload
="GUnload()"
>


    <!-- the div where the map will be displayed -->

    <div
 id
="map" 
style
="width: 550px; height: 700px"
></div
>
    <a
 href
="
range.htm
"
>Back to the tutorial page</a
>
    
    <!-- fail nicely if the browser has no Javascript -->

    <noscript
><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript
>




    <script
 type
="text/javascript"
>
    //<![CDATA[

    // Check to see if this browser can run the Google API
    if (GBrowserIsCompatible()) {

      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the function closure
      // Each instance of the function preserves the contends of a different instance
      // of the "marker" and "html" variables which will be needed later when the event triggers.    
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

      // Display the map, with some controls and set the initial location 
      var map = new GMap2(document.getElementById("map"));

      // ====== Restricting the range of Zoom Levels =====
      // Get the list of map types      
      var mt = map.getMapTypes();
      // Overwrite the getMinimumResolution() and getMaximumResolution() methods
      for (var i=0; i<mt.length; i++) {
        mt[i].getMinimumResolution = function() {return 7;}
        mt[i].getMaximumResolution = function() {return 11;}
      }


      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(53.3,-1.6), 7);
      
    
      // Set up markers with info windows 
    
      var point = new GLatLng(53.848964,-3.039463);
      var marker = createMarker(point,"<b>Blackpool Community Church<\/b><br>Bispham Community Centre<br>Bispham Road<br>Blackpool")
      map.addOverlay(marker);

      var point = new GLatLng(51.503894,-3.191303);
      var marker = createMarker(point,"<b>Cardiff All Nations Church<\/b><br>Sachville Avenue<br>Cardiff")
      map.addOverlay(marker);

      var point = new GLatLng(53.642126,-1.800942);
      var marker = createMarker(point,"<b>Huddersfield Community Church<\/b><br>New Life Church<br>Jubilee Centre<br>Market Street<br>Huddersfield")
      map.addOverlay(marker);

      var point = new GLatLng(53.955930,-1.089173);
      var marker = createMarker(point,"<b>York King's Church<\/b><br>The Priory Street Centre<br>15 Priory Street<br>York")
      map.addOverlay(marker);

      // Add a move listener to restrict the bounds range
      GEvent.addListener(map, "move", function() {
        checkBounds();
      });

      // The allowed region which the whole map must be within
      var allowedBounds = new GLatLngBounds(new GLatLng(49.5,-10), new GLatLng(59,2.6));
      
      // If the map position is out of range, move it back
      function checkBounds() {
        // Perform the check and return if OK
        if (allowedBounds.contains(map.getCenter())) {
          return;
        }
        // It`s not OK, so find the nearest allowed point and move there
        var C = map.getCenter();
        var X = C.lng();
        var Y = C.lat();

        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();

        if (X < AminX) {X = AminX;}
        if (X > AmaxX) {X = AmaxX;}
        if (Y < AminY) {Y = AminY;}
        if (Y > AmaxY) {Y = AmaxY;}
        //alert ("Restricting "+Y+" "+X);
        map.setCenter(new GLatLng(Y,X));
      }
    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/

    //]]>
    </script
>

  </body
>

</html
>
分享到:
评论

相关推荐

    Google Map API 使用示例

    Google Map API 是一款强大的工具,它允许开发者在自己的网站或应用程序中嵌入地图功能,提供定位、导航、地理编码、路线规划等多种服务。本示例将深入探讨如何使用 Google Map API,帮助你理解和掌握其核心概念及...

    Googlemap_API.rar_GoogleMap_加载地图_地图

    这个名为"Googlemap_API.rar_GoogleMap_加载地图_地图"的压缩包文件,很显然是一个关于如何使用Google Map API进行地图加载和相关设置的教程。以下是对这个主题的详细讲解: 首先,**初始化地图**是使用Google Map ...

    vc谷歌地图开发_googlemap

    这部分代码会使用谷歌地图API的函数,例如`google.maps.Map()`来创建地图实例。 4. **加载和运行HTML**:将你的HTML和JavaScript代码加载到Webview或浏览器控件中。在VC++中,你可以通过调用控件的`Navigate()`函数...

    手机地图-GoogleMap(For S60第三版)

    3. 数据管理:考虑到手机流量限制,GoogleMap允许用户选择离线地图下载,节省流量的同时提高了使用效率。 三、GoogleMap的使用体验 用户反馈表明,GoogleMap手机版在S60第三版手机上表现出色,不仅功能齐全,而且...

    Google 地图 google map api / 地图有关

    标题"Google 地图 google map api / 地图有关"表明了这个压缩包可能包含与Google地图API相关的代码示例或教程,Google Map API是Google提供的一项服务,允许开发者在自己的网站或应用中嵌入交互式地图,实现定位、...

    google map 谷歌地图joomla!插件

    内容中插入地图的短代码或标签,例如,在文章中插入`{googlemap}`,然后指定相关坐标,即可在文章中生成地图。 6. **兼容性**:此插件适用于Joomla! 1.0x和1.5+版本,这意味着它可能不兼容较新的Joomla!版本。随着...

    基于GoogleMap的简易智能地图搜索系统

    标题中的“基于GoogleMap的简易智能地图搜索系统”是指一个利用Google Maps API开发的应用程序,旨在帮助用户在地图上方便地查找和探索地理位置。这样的系统通常包括搜索功能、地图显示以及地点详情展示等核心模块。...

    谷歌地图开发包GoogleMap

    谷歌地图开发包GoogleMap是一个专为开发者设计的工具,它提供了丰富的API和功能,使得开发者可以集成谷歌地图服务到自己的应用程序中,无论是Web应用、移动应用还是其他平台的应用。这个开发包是谷歌地图服务的重要...

    真实好用的javaweb上使用的googlemap的demo

    这个"真实好用的javaweb上使用的googlemap的demo"提供了实现上述功能的示例代码,可以帮助开发者快速理解和应用Google Maps API于JavaWeb项目中。通过学习和实践这个Demo,你可以创建具有地图功能的动态Web应用,...

    Googlemap静态地图实现简介(网页复制版)

    Googlemap静态地图是一种无需使用JavaScript或动态网页技术即可将Google Maps嵌入到网页中的简单方法。通过Google Maps API的Static Maps服务,开发者可以通过发送包含特定参数的HTTP请求,来生成自定义的地图图片并...

    GMdl.rar_.gmdl_google_google map_map_卫星地图

    标题中的“GMdl.rar_.gmdl_google_google map_map_卫星地图”表明这是一个关于结合Google Map服务,特别是其卫星地图和普通地图功能的项目或工具。`.gmdl`可能是一个自定义格式或者特定程序的数据文件扩展名,用于...

    google map server

    4. 资源权限:使用Google Map Server或下载地图数据可能需要申请API密钥,并遵循谷歌的使用条款,包括数据用量限制和商业用途的规定。 5. 地图服务扩展:除了基本的地图浏览,Google Map Server还可以提供地理编码...

    GoogleMap地图下载程序VC++

    【GoogleMap地图下载程序VC++】是一个基于C++编程语言实现的应用程序,它允许用户下载GoogleMap的地图数据。这个程序采用单一线程处理,意味着它一次只执行一个任务,即下载地图。虽然单线程可能限制了并行处理的...

    google map api v3.18.0 离线开发包

    总的来说,"google map api v3.18.0 离线开发包"为开发者提供了在无网络环境下使用谷歌地图API的功能,使得地图服务在多种场景下都具备了可行性。通过熟练掌握和应用这个API,开发者可以创建出丰富多样的地图应用。

    leaflet加载百度、高德、谷歌、天地图等在线地图

    至于谷歌地图,由于其服务条款限制,通常不推荐直接在非谷歌产品中使用`TileLayer`来加载。不过,有一些第三方解决方案,如`leaflet-google-tile`,可以实现类似的功能,但请注意这可能会违反谷歌的服务条款。 天...

    Google离线地图,通过demo.html可以直接打开

    不过,请注意,Google的使用条款可能限制了离线地图的使用,因此在实际应用前,务必查阅并遵守相关条款。此外,为了提供更好的用户体验,你还可以考虑添加更多高级特性,如离线搜索、路线规划等。

    VC++调用GOOGLEMAP(google地图)代码

    在本文中,我们将深入...通过理解和运用上述步骤,开发者可以实现地图显示、定位、导航等功能,提升用户体验。不过,要注意的是,随着技术的发展,可能需要关注最新的API文档和最佳实践,以保持代码的兼容性和效率。

    get_google_map_1.4.zip

    "matlab"指明了编程语言,"algorithm"暗示了该程序包可能包含用于处理地图数据的算法,而"googlemap"和"map"则直接指出其与谷歌地图和地图操作相关。 在压缩包中,有两个文件:“license.txt”和“get_google_map”...

    google map api学习

    通过学习谷歌地图API,你可以创建定制的地图,添加标记、路径、信息窗口,甚至进行复杂的地理编码和路线规划。下面将详细介绍谷歌地图API的一些关键知识点。 首先,你需要在Google Developers Console中注册一个...

    google map api开发源代码

    9. **权限和密钥管理**:使用Google Map API需要申请API密钥,源代码可能会演示如何正确配置和管理API密钥,避免超出使用限制。 10. **响应式设计**:为了适应不同设备和屏幕尺寸,源代码可能实现了地图的响应式...

Global site tag (gtag.js) - Google Analytics