之前在做百度地图应用时候一直没弄明白瓦片地图的坐标跟URL是如何挂钩的，官网提供的API里面也没详细的解说，我一直没弄明白原理，今天无意间再把这个加载魔兽地图的demo翻出来看看，后面自己动手做了一下，才明白其中的关系，这个仅适用于像我这样基础不好的初学者，这个问题虽然不难，但是容易困惑，记下来引以为戒。
我是看JS的API。
先看原demo
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>叠加魔兽地图</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
var url = 'tiles/' + zoom + '/tile' + x + '_' + y + '.png'; //根据当前坐标，选取合适的瓦片图
return url;
}
var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 1, maxZoom: 4});
var map = new BMap.Map('allmap', {mapType: MyMap});
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.centerAndZoom(new BMap.Point(0, 0), 3);
</script>
这个是设置加载瓦片规则
tileLayer.getTilesUrl = function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
var url = 'tiles/' + zoom + '/tile' + x + '_' + y + '.png'; //根据当前坐标，选取合适的瓦片图
return url;
}
其中 var url = 'tiles/' + zoom + '/tile' + x + '_' + y + '.png'; //根据当前坐标，选取合适的瓦片图
最重要，这个的意思是在当前文件夹下有一个tiles文件夹，在tiles文件夹下，有一个zoom文件夹，在zoom 文件夹下有tilex_y.png(其中x和y根据实际计算得出)
举个例子：url= “tiles/4/tile1_1.png”
可是一般我们用工具切出来的瓦片并非是这样一种格式，像我切出来的是tiles/zoom/X/Y.png(zoom是缩放等级0,1,2,3,4)
所以根据百度的瓦片介绍，如果要显示zoom = 1，坐标为（1,1）的图片，url=“tiles/1/1/1.png”才能正常显示
所以我的var url = 'tile/' + zoom + '/' + x + '/' + y + '.png'; 就能显示出来
不同的切图工具切的瓦片图存放的文件结构也不相同，所以要根据实际的情况设置url。