架设地图图片缓存服务器解决GoogleMap地图图片请求数据限制

类型：修改器(游戏工具)大小：16.2M语言：中文评分：2.5
标签：

立即下载

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

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

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

大概流程如下：

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
 6 <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
 7 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 8 <script>  
 9 function LocalMapType() {}
10   
11   LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
12   LocalMapType.prototype.maxZoom = 15;
13   LocalMapType.prototype.minZoom = 8;
14   LocalMapType.prototype.name = "本地地图";
15   LocalMapType.prototype.alt = "显示本地地图数据";
16   LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
17 var img = ownerDocument.createElement("img");
18       img.style.width = this.tileSize.width + "px";
19       img.style.height = this.tileSize.height + "px";
20       img.onerror = function(){
21         img.src = "c:\\Map\\nomap.png";
22       }
23       
24 //var strURL = "C:\\Map\\Google_Hybrid\\" + zoom + "\\" + coord.x + "\\" + coord.y + ".png";
25 var strURL = "http://localhost:8080/gettitle/gettitle.png?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom; 
26       img.src = strURL;
27 return img;
28   };
29     
30 var localMapType = new LocalMapType();
31  
32 function initialize() {
33 var myLatlng = new google.maps.LatLng(36.867078, 119.286772);
34 var myOptions = {
35       center: myLatlng,
36       zoom: 11,
37       streetViewControl: false,
38       mapTypeControlOptions: {
39             mapTypeIds: ["local"]
40         }
41     };
42  
43 var map = new google.maps.Map(document.getElementById("map_canvas"),
44         myOptions);
45 
46     map.mapTypes.set('local', localMapType);
47     map.setMapTypeId('local');
48   }
49  
50 </script>
51 </head>
52 <body onload="initialize()">
53   <div id="map_canvas" style="width: 640px; height: 480px;"></div>
54 </body>
55 </html>