最近大家常常在問，如何制作鼓浪嶼手繪地圖，如何將氣象圖層疊加在高德地圖上啊？
其實地圖上的研發量很小，幾行代碼就可以搞定。
關鍵是在圖片繪制上，有較高的要求。
下面就用簡單粗暴的方法來實現，如有不妥之處，請大家輕噴。
確定圖片繪制范圍
以鼓浪嶼地圖為例，打開框選取點工具：http://zhaoziang.com/amap/getBounds.htm
獲取到左下角和右上角的坐標，這個就是圖片的顯示范圍。
如下圖，3是左下角，1是右上角。
bounds: new AMap.Bounds( [118.057708, 24.436293], //左下角 [118.077706, 24.454069] //右上角 )
制作圖片
打開Photoshop，或者您有別的制圖軟件也可以，開始制作手繪地圖吧。
圖片的創作您可以任意發揮，每個人都有自己的特色。這里對制作圖片就不贅述了。
請注意，繪制的圖片，一定和您框選的范圍一致！！
繪制過程中，保證繪制內容和底圖高度重合！
這里一定要保證圖片重合，后期無法通過糾偏、校准等方式對齊圖片！一定注意！
繪制完畢后，保存圖片。
請注意，生成的圖片，一定和您框選的范圍一致！！
也就是說，如果有白邊，也需要保留。
將圖片疊加到高德地圖上
代碼很簡單啊，創建地圖，建立圖片圖層，就好了啊。
var imageLayer = new AMap.ImageLayer({
url: 'gulangyu.png',
bounds: new AMap.Bounds(
[118.057708, 24.436293], //左下角
[118.077706, 24.454069] //右上角
),
zooms: [15, 18]
});
var map = new AMap.Map('container', {
resizeEnable: true,
center: [118.067042,24.444673],
zoom: 15,
layers: [
new AMap.TileLayer(),
imageLayer
]
});
快來體驗吧~
http://zhaoziang.com/amap/gulangyu.htm
整理出來的
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>標題</title> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7"></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> </head> <body> <div id="container"></div> <script> var imageLayer = new AMap.ImageLayer({ url: 'XXX.png', bounds: new AMap.Bounds( [118.057708, 24.436293], ////左上角 [118.077706, 24.454069] ////右上角 ), zooms: [15, 18] }); var map = new AMap.Map('container', { resizeEnable: true, center: [118.067042,24.444673], zoom: 15, layers: [ new AMap.TileLayer(), imageLayer ] }); </script> </body> </html>
出處：http://www.cnblogs.com/milkmap/ 學習用