转：谷歌离线地图基础

　

google离线地图

一.需要文件

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

二.html配置

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

• 1
• 2

三.使用

html中使用p 展示地图

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

• 1

text/javascript中创建离线对象

////////////////////////////////CoordMapType对象定义:显示目标位置p/////////////////////////////////////////////////////////////////
function CoordMapType(tileSize) {//创建对象方法(构造函数)
    this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var p = ownerDocument.createElement('DIV');
    var ymax = 1 << zoom;
    var y = ymax - coord.y - 1;
//  p.innerHTML = coord.x + "," + y + "," + zoom;
    p.style.width = this.tileSize.width + 'px';
    p.style.height = this.tileSize.height + 'px';
    p.style.fontSize = '10';
    p.style.borderStyle = 'solid';
    p.style.borderWidth = '0px';
    p.style.bordercolor = '#AAAAAA';
    return p;
};

////////////////////////////////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;
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

载入地图（除了需要使用离线地图对象外，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上创建地图,地图设置myOptions
    var 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;

相关阅读

天龙八部单机修改之解决地图上限报错

天龙八部单机修改之解决地图上限报错有时候会碰到版本架设好以后点击任何副本都提示副本上限进不去的情况，这种情形是sence.lua被

【可视化】Echarts3 在世界地图中绘制中国各省份的轮

要在世界地图展现出来的情况下绘制中国省份的轮廓，根据现有的echarts-api是不可行的。但好在echarts也提供了自定义地图的方式，使用

UX中常用的四种地图

客户移情图、客户旅程图、体验地图、服务蓝图从不同的角度出发，对UX设计的不同过程进行描绘，是构建组织内关于UX共识的重要方法。产

创建用户故事地图(User Story Mapping)的8个步骤

用户故事地图已经成为敏捷需求规划中的一个流行方法。用户故事地图可以将你的backlog变成一张二维地图，而不是传统的简单列表。用

丁丁地图

丁丁地图链接:http://www.ddmap.com/