一.需要文件

gapi3文件夹：存放接口等
tilemap文件夹：存放图片
gapi.js文件
maptool.js文件

二.html配置

<script type="text/javascript" src="gapi.js"></script>
<script type="text/javascript" src="maptool.js"></script>

三.使用

html中使用div 展示地图

<div id="map_canvas"  style="width=100%; height: 900px;"></div>

text/javascript中创建离线对象

////////////////////////////////CoordMapType对象定义:显示目标位置div/////////////////////////////////////////////////////////////////
function CoordMapType(tileSize) {//创建对象方法(构造函数)this.tileSize = tileSize;
}CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {var div = ownerDocument.createElement('DIV');var ymax = 1 << zoom;var y = ymax - coord.y - 1;
//  div.innerHTML = coord.x + "," + y + "," + zoom;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 = '0px';div.style.borderColor = '#AAAAAA';return div;
};////////////////////////////////LocalMapType对象定义:使用本地地图实体类型/////////////////////////////////////////////////////////////////
function LocalMapType() {}LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalMapType.prototype.maxZoom = 18;
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 ymax = 1 << zoom;var y = ymax - coord.y - 1;var strURL = "tilemap\\sjztms\\" + zoom + "\\" + coord.x + "\\" + y + ".png";img.src = strURL; return img;
};

载入地图（除了需要使用离线地图对象外，API使用方法和在线地图一样）

var localMapType = new LocalMapType();
//创建一个简单的 Google 地图
var myLatlng = new google.maps.LatLng(30.732137,103.968976);//谷歌经纬度，使用WGS84坐标系
var myOptions = {//myOptions:地图设置center: myLatlng,zoom: 13 ,zoomControl :false,streetViewControl: false,disableDoubleClickZoom: true,//禁用双击放大mapTypeControl: false,//禁用左上角样式 控件mapTypeControlOptions: {mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP]}
}
在map_canvas上创建地图,地图设置myOptionsvar map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);//Map() 的属性:controls控件；mapTypes按字符串 ID 划分的 MapType 实例的注册表，overlayMapTypes 要叠加的额外地图类型map.mapTypes.set('local', localMapType);//注册本地地图实体类型map.setMapTypeId('local');//使用本地地图实体类型map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
allmap=map;

转：谷歌离线地图基础相关推荐

8、谷歌离线地图开发教程
谷歌(百度.高德)离线地图开发环境搭建发布时间:2018-01-17 版权: 1.说明离线地图开发环境支持谷歌地图.百度地图.高德地图等等所有常用地图类型,支持在局域网内的地图部署.二次开发. 2 ...
BIGEMAP(百度、高德、谷歌)离线地图二次开发
(百度.高德.谷歌)离线地图二次开发发布时间:2019-04-10 版权: 1.如何搭建离线地图开发环境 2.下载离线地图数据(金字塔瓦片数据 ...
(百度、高德、谷歌)离线地图二次开发
(百度.高德.谷歌)离线地图二次开发发布时间:2019-04-10 版权: 相关链接:三维(3D)离线地图二次开发 1.如何搭建离线地图 ...
如何使用Openlayers 3加载谷歌离线地图
谷歌地图部署说明:使用地图下载工具下载的谷歌离线地图大致如下结构,使用合适的WEB服务器发布地图服务. 使用Openlayers 3调用地图服务说明:这里使用ol.source.XYZ(更多语法请 ...
谷歌离线地图API解析
[Google离线地图示例解析] 1.说明离线地图发布有多种方式均可以实现,可以利用ArcGis Server.GeoServer等构建地图Web服务器,还可以使用谷歌地图.百度地图等API进行地 ...
谷歌离线地图Api附获取教程
三版离线Api下载链接:https://pan.baidu.com/s/1ei6tyLKTHMIGdDuowqQW6Q 提取码:x1va GoogleMapAPIV3来自: https://www.c ...
如何下载谷歌离线地图瓦片数据
离线地图分为两种:一种叫"金字塔瓦片"数据,一种叫"矢量地图数据".我们看的在线地图比如,百度,谷歌,高德等等网页上的地图,都是金字塔瓦片:另外一种是手机上用来 ...
如何搭建谷歌离线地图服务？
离线地图分为两种:一种叫"金字塔瓦片"数据,一种叫"矢量地图数据".我们看的在线地图比如,百度,谷歌,高德等等网页上的地图,都是金字塔瓦片:另外一种是手机上用来 ...
谷歌离线地图的使用(1)
实质: 整个地图都是以由小的地图瓦片组成的,因此可以将这些小瓦片图片保存下来,在需要的时候读取即可. 过程: 客户端将地图的三维坐标发送回服务器,服务器经过计算后,返回对应的图片. API 下载地 ...

转：谷歌离线地图基础

一.需要文件

二.html配置

三.使用

html中使用div 展示地图

text/javascript中创建离线对象

载入地图（除了需要使用离线地图对象外，API使用方法和在线地图一样）

转：谷歌离线地图基础相关推荐

最新文章

热门文章