最近GoogleMap對(duì)于通過(guò)API訪問(wèn)的地圖服務(wù)的請(qǐng)求不再是完全免費(fèi)，用戶(hù)每日每個(gè)API最多可以生成25000個(gè)地圖下載任務(wù)，對(duì)于地圖圖片則限制在2500張。這會(huì)對(duì)很多使用Google Map API開(kāi)發(fā)的應(yīng)用程序有很大的影響，特別是在國(guó)內(nèi)。也到不少朋友的尋問(wèn)，完全突破的方式還沒(méi)有，想了一種變通的方式來(lái)解決。
這個(gè)辦法就是在我們的客戶(hù)端和Google Map地圖服務(wù)器之間架設(shè)一臺(tái)地圖圖片緩存服務(wù)器，把需要的地圖，先緩存在地圖圖片緩存服務(wù)器上，客戶(hù)端請(qǐng)求時(shí)，先從緩存服務(wù)器上去獲取，如果沒(méi)有，再?gòu)腉oogle Map地圖服務(wù)器上獲取，保存在本地，再?gòu)谋镜胤祷亟o客戶(hù)端，這樣就可以減少對(duì)Google Map地圖圖片服務(wù)器的請(qǐng)求次數(shù)。
當(dāng)然，這種方法在開(kāi)始的時(shí)候，請(qǐng)求量仍然會(huì)很大，不過(guò)到后面，數(shù)量就會(huì)越來(lái)越少。
大概流程如下：
流程已經(jīng)很簡(jiǎn)單了，中間實(shí)現(xiàn)的方式也不復(fù)雜，只要能實(shí)現(xiàn)上面的功能，使用哪個(gè)平臺(tái)不重要，下面是前端自己定義地圖類(lèi)型的方式：
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 = "顯示本地地圖數(shù)據(jù)";
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>
喜歡 
頂
難過(guò)
囧
圍觀
無(wú)聊
