1.可下載谷歌地圖JavaScript API V3 最新API
2.去掉谷歌地圖聯網驗證功能。
3.支持簡體中文、繁體中文、英文版API下載
4.支持谷歌、高德等多種地圖無縫切換
5.支持衛星圖和路網疊加
6.支持添加點、線、面等各種標注
7.離線地圖用戶體驗和在線地圖一樣流暢
利用Google Maps JavaScript API離線版,可以在沒有網絡的情況下調用本地的瓦片地圖。
目錄結構：
mapfiles----------google maps 核心 api
maptile-----------地圖瓦片,地圖瓦片可用http://code.google.com/p/maptiledownloader/ 下載獲得
offlinemaps.html--離線地圖演示demo
離線api使用例子
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title>Offline Maps Demo</title> 7 </head> 8 9 <body> 10 <div id="map_canvas" style="left:0;top:0;width:100%;height:100%;position:absolute;"></div> 11 <!--注釋的這段是引用在線的Google地圖API--> 12 <!--script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh-cn"></script--> 13 <!--使用本地的Google地圖API--> 14 <script type="text/javascript" src="mapfiles/mapapi.js"></script> 15 <script type="text/javascript"> 16 17 18 GMapsMapTypeFactory.createMapType = function (name,mapTilePath) { 19 ///var mapTilePath = "maptile/nokiamaps/roadmap/"; 20 var getTileUrl = function (coord, zoom) { 21 var numTiles = (1 << zoom); 22 if ((coord.x < 0) || (coord.x >= numTiles) || (coord.y < 0) || (coord.y >= numTiles)) { 23 return null; 24 } 25 return mapTilePath + zoom + "/" + coord.x + "/" + coord.y + ".png"; 26 }; 27 28 var imageMapTypeOptions = { 29 "name":name, 30 "alt": "Show street map", 31 "tileSize": new google.maps.Size(256, 256), 32 "maxZoom": 22, 33 "minZoom": 0, 34 "getTileUrl": getTileUrl, 35 "isPng": true, 36 "opacity": 1.0 37 }; 38 39 return new google.maps.ImageMapType(imageMapTypeOptions); 40 } 41 42 function initialize() { 43 var latlng = new google.maps.LatLng(30.546931930326352,114.29320630516055) 44 var map = new google.maps.Map(document.getElementById("map_canvas")); 45 var gmapsMapTypeId = "nokia_roadmap"; 46 map.mapTypes.set(gmapsMapTypeId, GMapsMapTypeFactory.createMapType("nokia","maptile/nokiamaps/roadmap/")); 57 map.setCenter(latlng); 58 map.setZoom(5); 59 60 var marker = new google.maps.Marker({ 61 position: latlng, 62 map: map, 63 draggable: true, 64 title: "Hello World!" 65 }); 66 67 var infowindow = new google.maps.InfoWindow({ 68 content: "latlng:" + marker.getPosition().toString(), 69 size: new google.maps.Size(50, 50) 70 }); 71 72 google.maps.event.addListener(marker, 'click', function () { 73 infowindow.setContent("latlng:" + marker.getPosition().toUrlValue(6)); 74 infowindow.open(map, marker); 75 }); 76 77 } 78 79 google.maps.event.addDomListener(window, "load", initialize); 80 </script> 81 </body> 82 83 </html>
效果圖
下載源碼和例子