包含的文件夹格式如下:
程序运行效果如下:
页面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#map_canvas{
background-color: #CCC;
width:100%;
height: 95%;
position: absolute;
bottom:0px;
left:0;
right:0;
top:20;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="mapapi.js"></script>
<script type="text/javascript">
var map;
var myCenter = new google.maps.LatLng(22.786607,100.977316);
function CoordMapType() {
}
CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = '<img name="" src="./tiles/' + zoom + '/gs_' + coord.x +'_'+ coord.y + '_' + zoom + '.jpg" onerror="errpic(this)"/>';
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '10';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
return div;
};
//实现更换图片功能
var web_url="./";
function errpic(thepic){
thepic.src=web_url+"undefined.jpg";
}
CoordMapType.prototype.name = "Tile #s";
CoordMapType.prototype.alt = "Tile Coordinate Map Type";
var coordinateMapType = new CoordMapType();
function initialize() {
var mapOptions = {
zoom: 6,
center: myCenter,
mapTypeId: "coordinate"
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.mapTypes.set('coordinate',coordinateMapType);
}
</script>
</head>
<body onLoad="initialize()">
<div>
</div>
<div id="map_canvas"></div>
</body>
</html>
程序源代码下载地址:
http://download.csdn.net/detail/qinpeng100423/4788057
全文完。
分享到:
相关推荐
google map v3离线地图资源包,原博文链接源码
1.vue-baidu-map在线地图代码不用改动,只用按照文档添加baidu-api.js和baidu-init.js,并在vue依赖包 node_modules文件找到,修改vue-baidu-map的 index.js文件 就能完成离线配置 2.jar包可以免费下载百度地图瓦片...
适用于谷歌地球离线瓦片下载,支持多线程应用下载,可下载1-19层谷歌地图
GoogleMaps API V3离线下载工具及使用.zip 主要对其地图的下载,及自我编制。 离线下完全可以使用,只需先进行地图的下载。 添加了控件,离线下可进行操作。。。
采用离线的 Google Map API 加载离线水经注谷歌地图下载器的地图数据
谷歌地图5.0 离线数据地图 北京地区 共6个文件 放到sd card/android/data/ 另外需要一个com.google.android.apps.maps(合并).bat文件合并。 请下载完整,包括(1)(2)(3)(4)(5)(6) 本人可一直在用。如需要...
封装了一个最新的3.18.0版本的离线开发包,测试了一下,在线街道图、地形图、离线地图均正常。
如何采用离线的_Google_Map_API_加载离线谷歌地图的方法
mapinfor离线地图 包含31个省市自治区的省界,以及这31个省市自治区的市界、县界及其名称等,非常详细
google map v3开发 V3地图搜素,V3地图标注,V3地图多点标注
Google Maps API v3离线开发包,带本地地图示例数据 需要特别说明的是: 1、本离线开发包内仅实现了功能离线,即js源码和部分控件图片的离线,地图仍然使用Google Tile。 2、从思路上讲,将Google Tile下载到本地...
VUE 离线地图的下载与使用,下载瓦片离线使用
谷歌离线地图引擎,含地图调用demo,可以直接运行,具有一定参考意义
在线地图 利用google map api 、天地图api、MapBar api、进行地图开发 离线地图 地图保存到本地,用现有技术对数据进行访问。
谷歌MAP_V3中文详解以及一个简单例子
谷歌离线地图显示,或者在线地图显示,坐标位置标记
对谷歌地图的应用开发,摸索了一个多月。编写了一个GoogleMaps ApiV3 Demo。内容包含了谷歌地图的基本功能,包括:收索地点、标注、填写标注信息、响应地图(点击、双击、经过)事件。一个比较复杂的难点是:点击...
如何采用离线的_Google_Map_API_加载离线天地图的方法
• Unity 2017.4 LTS 及更高版本; • 渲染管线:标准 RP、URP、HDRP; • 独立平台、Android、iOS、Windows Store、WebGL;...• 其他 Web 服务:AMap 搜索、必应地图海拔 API、必应地图位置 API、HERE 路由 API、Open