离线地图---笔记
离线地图下载工具：http://code.google.com/p/maptiledownloader/downloads/list
mapapi3.8.6.js文件内容：
/**
*这是GoogleMapAPI3的离线JS版本，只用于学习和研究使用。
*不包含地图数据，需要的可以自己下载或自己制作。
*author:liongis
*mail:LionGIS@163.com
*QQ:1366940902
*BLOG:http://liongis.cnblogs.com
*date:2012-4-10
**/
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
var modules = google.maps.modules = {};
google.maps.__gjsload__ = function(name, text) {
modules[name] = text;
};
google.maps.Load = function(apiLoad) {
delete google.maps.Load;
apiLoad([null,[[["http://mt0.googleapis.com/vt?lyrs=m@174000000\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/vt?lyrs=m@174000000\u0026src=api\u0026hl=zh-CN\u0026"],null,null,null,null,"m@174000000"],[["http://khm0.googleapis.com/kh?v=108\u0026hl=zh-CN\u0026","http://khm1.googleapis.com/kh?v=108\u0026hl=zh-CN\u0026"],null,null,null,1,"108"],[["http://mt0.googleapis.com/vt?lyrs=h@174000000\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/vt?lyrs=h@174000000\u0026src=api\u0026hl=zh-CN\u0026"],null,null,"imgtp=png32\u0026",null,"h@174000000"],[["http://mt0.googleapis.com/vt?lyrs=t@128,r@174000000\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/vt?lyrs=t@128,r@174000000\u0026src=api\u0026hl=zh-CN\u0026"],null,null,null,null,"t@128,r@174000000"],null,[[null,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt?v=kr1.15\u0026hl=zh-CN\u0026","http://mt1.gmaptiles.co.kr/mt?v=kr1.15\u0026hl=zh-CN\u0026"]],[null,0,8,8,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[354690000,1286700000],[386200000,1320035000]]],["http://mt0.gmaptiles.co.kr/mt?v=kr1.15\u0026hl=zh-CN\u0026","http://mt1.gmaptiles.co.kr/mt?v=kr1.15\u0026hl=zh-CN\u0026"]],[null,0,9,9,[[[330000000,1246050000],[386200000,1279600000]],[[340000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1302000000]],[[368300000,1302000000],[386200000,1320035000]]],["http://mt0.gmaptiles.co.kr/mt?v=kr1.15\u0026hl=zh-CN\u0026","http://mt1.gmaptiles.co.kr/mt?v=kr1.15\u0026hl=zh-CN\u0026"]],[null,0,10,19,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt?v=kr1.15\u0026hl=zh-CN\u0026","http://mt1.gmaptiles.co.kr/mt?v=kr1.15\u0026hl=zh-CN\u0026"]],[null,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt?v=kr1p.12\u0026hl=zh-CN\u0026","http://mt1.gmaptiles.co.kr/mt?v=kr1p.12\u0026hl=zh-CN\u0026"]],[null,3,8,8,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[354690000,1286700000],[386200000,1320035000]]],["http://mt0.gmaptiles.co.kr/mt?v=kr1p.12\u0026hl=zh-CN\u0026","http://mt1.gmaptiles.co.kr/mt?v=kr1p.12\u0026hl=zh-CN\u0026"]],[null,3,9,9,[[[330000000,1246050000],[386200000,1279600000]],[[340000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1302000000]],[[368300000,1302000000],[386200000,1320035000]]],["http://mt0.gmaptiles.co.kr/mt?v=kr1p.12\u0026hl=zh-CN\u0026","http://mt1.gmaptiles.co.kr/mt?v=kr1p.12\u0026hl=zh-CN\u0026"]],[null,3,10,null,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt?v=kr1p.12\u0026hl=zh-CN\u0026","http://mt1.gmaptiles.co.kr/mt?v=kr1p.12\u0026hl=zh-CN\u0026"]]],[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khmdb0.googleapis.com/kh?v=53\u0026hl=zh-CN\u0026","http://khmdb1.googleapis.com/kh?v=53\u0026hl=zh-CN\u0026"],null,null,null,null,"53"],[["http://mt0.googleapis.com/mapslt?hl=zh-CN\u0026","http://mt1.googleapis.com/mapslt?hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=zh-CN\u0026","http://mt1.googleapis.com/mapslt/ft?hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/vt?hl=zh-CN\u0026","http://mt1.googleapis.com/vt?hl=zh-CN\u0026"]]],["zh-CN","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["mapfiles/api-3/8/6","3.8.6"],[4139660736],1.0,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=108\u0026",null,"https://earthbuilder.google.com","https://earthbuilder.googleapis.com"], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("mapfiles/api-3/8/6/main.js");
})();
map-simple.html 浏览文件：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<!--script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script-->
<script type="text/javascript" src="mapapi3.8.6.js"></script>
<script type="text/javascript">
/*function LocalSatelliteMapType() {}
LocalSatelliteMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalSatelliteMapType.prototype.maxZoom = 4; //地图显示最大级别
LocalSatelliteMapType.prototype.minZoom = 1; //地图显示最小级别
LocalSatelliteMapType.prototype.name = "本地卫星数据";
LocalSatelliteMapType.prototype.alt = "显示本地卫星地图数据";
LocalSatelliteMapType.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";
//地图存放路径
var strURL = "maptile/googlemaps/Hybrid/"; //卫星地图
strURL += zoom + "/" + coord.x + "/" + coord.y + ".jpg";
img.src = strURL;
return img;
};*/
function CoordMapType(tileSize) {
this.tileSize = tileSize;
}
CoordMapType.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";
//卫星地图地名存放路径
var strURL = "maptile/googlemaps/overlay/";
strURL += zoom + "/" + coord.x + "/" + coord.y + ".png";
img.src = strURL;
return img;
};
function LocalMapType() {}
LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalMapType.prototype.maxZoom = 4; //地图显示最大级别
LocalMapType.prototype.minZoom = 1; //地图显示最小级别
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";
//卫星地图地图存放路径
var strURL = "maptile/googlemaps/Hybrid/";
strURL += zoom + "/" + coord.x + "/" + coord.y + ".jpg";
img.src = strURL;
return img;
};
var localMapType = new LocalMapType();
function initialize() {
var myLatlng = new google.maps.LatLng(39.900827854566344, 116.38339402421877);
var myOptions = {
center: myLatlng,
zoom: 1,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.TERRAIN,
'locaMap' ] //定义地图类型
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.mapTypes.set('locaMap', localMapType); //绑定本地地图类型
map.setMapTypeId('locaMap'); //指定显示本地地图
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
//MapTypeId类型发现变化时发生
google.maps.event.addListener(map, 'maptypeid_changed', function () {
if (map.getMapTypeId() == 'locaMap') {
// marker1.setVisible(false);
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
}
else {
//alert("非本地地图");
map.overlayMapTypes.clear();
}
});
//var markerOptions = new google.maps.MarkerOptions({draggable:true});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Hello World!"
});
var infowindow = new google.maps.InfoWindow(
{ content:"latlng:" + marker.getPosition().toString(),
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("latlng:" + marker.getPosition().toUrlValue(6));
infowindow.open(map,marker);
});
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas"></div>
</body>
</html>
