GoogleMap地图图片请求数据限制解决办法

最近GoogleMap对于通过API访问的地图服务的请求不再是完全免费,用户每日每个API最多可以生成25000个地图下载任务,对于地图图片则限制在2500张。这会对很多使用Google Map API开发的应用程序有很大的影响,特别是在国内。也到不少朋友的寻问,完全突破的方式还没有,想了一种变通的方式来解决。

这个办法就是在我们的客户端和Google Map地图服务器之间架设一台地图图片缓存服务器,把需要的地图,先缓存在地图图片缓存服务器上,客户端请求时,先从缓存服务器上去获取,如果没有,再从Google Map地图服务器上获取,保存在本地,再从本地返回给客户端,这样就可以减少对Google Map地图图片服务器的请求次数。

当然,这种方法在开始的时候,请求量仍然会很大,不过到后面,数量就会越来越少。

大概流程如下:

流程已经很简单了,中间实现的方式也不复杂,只要能实现上面的功能,使用哪个平台不重要,下面是前端自己定义地图类型的方式:


<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
 <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 <script>  
 function LocalMapType() {}
   
   LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
   LocalMapType.prototype.maxZoom = 15;
   LocalMapType.prototype.minZoom = 8;
   LocalMapType.prototype.name = "本地地图";
   LocalMapType.prototype.alt = "显示本地地图数据";
   LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
 var img = ownerDocument.createElement("img");
       img.style.width = this.tileSize.width + "px";
       img.style.height = this.tileSize.height + "px";
       img.onerror = function(){
         img.src = "c:\\Map\\nomap.png";
       }
       
 //var strURL = "C:\\Map\\Google_Hybrid\\" + zoom + "\\" + coord.x + "\\" + coord.y + ".png";
 var strURL = "http://localhost:8080/gettitle/gettitle.png?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom; 
       img.src = strURL;
 return img;
   };
     
 var localMapType = new LocalMapType();
  
 function initialize() {
 var myLatlng = new google.maps.LatLng(36.867078, 119.286772);
 var myOptions = {
       center: myLatlng,
       zoom: 11,
       streetViewControl: false,
       mapTypeControlOptions: {
             mapTypeIds: ["local"]
         }
     };
  
 var map = new google.maps.Map(document.getElementById("map_canvas"),
         myOptions);
 
     map.mapTypes.set('local', localMapType);
     map.setMapTypeId('local');
   }
  
 </script>
 </head>
 <body οnlοad="initialize()">
   <div id="map_canvas" style="width: 640px; height: 480px;"></div>
 </body>
 </html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值