轉載請注明出處！
我們自己制作的小區域專題地圖有時候需要發布在百度地圖上，並覆蓋原有的百度地圖，例如，景區的專題地圖，由於百度地圖提供的界面較為單一，無法提供景區游覽的功能，一些景區就自己制作景區地圖，然后加載在百度地圖上。
那么我們怎么將一張png圖片（為什么是png圖片呢，因為png圖片能夠使底圖透明）放在百度地圖上呢，百度lbs api是有提供接口和案例的，http://lbsyun.baidu.com/jsdemo.htm#g0_2這是百度的官方示例。地圖從png圖片到切片，到放置在百度地圖上需要用到以下幾個步驟：
1.找到百度地圖切圖工具
切圖工具五花八門，我用的是下面這個，覺得還不錯，這里有下載地址：http://pan.baidu.com/s/1hr8VnIO
2.切圖工具使用
選擇exe文件打開，瀏覽需要選擇的地圖文件，
，
選擇輸出目錄
上面的經緯度只能通過不斷嘗試，與百度地圖進行比對來獲得。
下面是我比對的方法，選一個參考點，放在屏幕的一個部分，再打開百度地圖官網，把這個參考點移動到屏幕的同一個地方，再對切圖的部分進行比對，如有偏移，則回到上圖進行坐標修改（辦法雖然笨，但是很實用）：
這個是我的輸出結果，沒錯，只有文件夾，和一個index.html文件
點開看是這樣的
不用但新，接下來我給大家這個源代碼，將這個源代碼全部替換index.html文件就可以了。
<!DOCTYPE html>
<html>
<head>
<title>自定義地圖類型</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html,body,#div_gis {width: 100%;height: 100%; overflow:hidden; font-size:12px; margin:0;font-family:'微軟雅黑';}
.BMap_cpyCtrl{display:none; }
.anchorBL{display:none; }
</style>
<script type='text/javascript' src='http://api.map.baidu.com/api?v=2.0&ak=rHD1kYHbbvG2Wx4VnlEqEUZX'></script>
</head>
<body><div id='div_gis' ></div></body></html>
<script type='text/javascript'>
var map = new BMap.Map('div_gis',{minZoom:4,maxZoom:18});
map.enableContinuousZoom();
map.enableScrollWheelZoom(true);
map.enableScrollWheelZoom();
var point = new BMap.Point(109.773467, 18.316314);
map.centerAndZoom(point, 13);
map.addEventListener("click", function(e){
alert(e.point.lng + ", " + e.point.lat);
});
var tileLayer = new BMap.TileLayer({isTransparentPng: true});
tileLayer.getTilesUrl = function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}
map.addTileLayer(tileLayer);
</script>
預覽效果是這樣的
以上就是我的切圖過程。
重要提示：但是切圖還需注意圖片大小的情況，如果像素大小不控制，則會遇到切除來的圖比百度地圖上的大一圈或者小一圈的情況，具體參考以下數據：
zoom(min)=15
zoom(max)=18
18級的源圖片邊長計算公式，為：256*2的[zoom(max)-zoom(min)]次方=2048
256*2^(18-15)=2048
用這個圖，可以保證15、16、17、18四個級別的圖像不會發生錯位。
如果想顯示5個級別，如14到18級，那么根據上面的公式，原圖片的邊長應該為4096。