【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
摘要：自定义地图图层的用途十分广泛。常见的应用，比如制作魔兽地图和清华校园地图（使用即可轻松实现）。今天我们来学习，当地图上有大量标注，比如600万个的时候，我们如何用“麻点图”来实现标注的展示。
----------------------------------------------------------------------------------------------------------
“麻点图”展示图，如下图所示：
“麻点图”实现原理：
1、将麻点做在同一张图片上，然后利用自定义图层接口，将麻点图贴在地图底图上；
2、然后利用热区接口，使鼠标放在热点上，有文字显示。
3、可以自己加上信息窗口等覆盖物，让热区hotspot看起来像标注marker一样。
根据地图级别确定图块总面积
一个图块是256*256的图片构成的。
当地图为1级时，整个地图由4张图片构成，如下图（中心点为0,0）：
所以图层的长宽为512*512。如下图：
将此图裁成4块，贴到地图底图上。
同理，其他地图级别、图块数量和图块总面积的关系如下表：
地图级别 & &图块数量 &
& &图块总面积 &
& & & 2*2=4
&512*512 & &
& & &2^1=2,
2^2=4, 256*2=512
& & & 4*4=16
& & &2^2=4,
4^2=16, 256*4=1024
& & & 8*8=64
& & &2^3=8,
8^2=64, 256*8=2046
& & & 16*16=256
& & & ……
zoom & & &
(2^zoom)^2 & &
&(256*(zoom^2))^2
以zoom=3为例，制作热区。
使用自定义图层的方法，将麻点图贴到地图上。
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';
然后为每一个麻点添加一个热区。（示例中只添加了可视区域内的21个麻点）
//创建热区var p1 = new BMap.Point(-53..83958);
var h1 = new BMap.Hotspot(p1, {text: "第1个点"});
map.addHotspot(h1);
最终效果图：（用此方法，可以添加600万个以上的热区哦~）
全部源代码：
DOCTYPE html&
&/span&html&
&/span&head&
&/span&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&/span&title&热区+自定义图层&/&/span&title&
&/span&script type="text/javascript" src="http://api./api?v=1.2"&&/&/span&script&
&/span&head&
&/span&body&
&/span&div id="map" style="width:400height:300px"&&/&/span&div&
&/span&div id="info" style="width:400height:800px"&&/&/span&div&
&/span&script type="text/javascript"&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';
}var map = new BMap.Map('map');
map.addTileLayer(tileLayer);//map.addControl(new BMap.NavigationControl());map.centerAndZoom(new BMap.Point(0, 0), 3);
//点击获取屏幕经纬度map.addEventListener("click",function(e){
document.getElementByIdx_x_x("info").innerHTML += e.point.lng + "," + e.point.lat + "";
//创建热区var p1 = new BMap.Point(-53.278572,36.83958);var h1 = new BMap.Hotspot(p1, {text: "第1个点"});
map.addHotspot(h1);
var p2 = new BMap.Point(-14.717837,35.647352);var h2 = new BMap.Hotspot(p2, {text: "第2个点"});
map.addHotspot(h2);
var p3 = new BMap.Point(9.713773,36.126444);var h3 = new BMap.Hotspot(p3, {text: "第3个点"});
map.addHotspot(h3);
var p4 = new BMap.Point(43.564799,30.699049);var h4 = new BMap.Hotspot(p4, {text: "第4个点"});
map.addHotspot(h4);
var p5 = new BMap.Point(30.024388,29.418746);var h5 = new BMap.Hotspot(p5, {text: "第5个点"});
map.addHotspot(h5);
var p6 = new BMap.Point(29.141318,18.90614);var h6 = new BMap.Hotspot(p6, {text: "第6个点"});
map.addHotspot(h6);
var p7 = new BMap.Point(37.677664,17.781705);var h7 = new BMap.Hotspot(p7, {text: "第7个点"});
map.addHotspot(h7);
var p8 = new BMap.Point(21.488043,10.607121);var h8 = new BMap.Hotspot(p8, {text: "第8个点"});
map.addHotspot(h8);
var p9 = new BMap.Point(16.189621,15.225979);var h9 = new BMap.Hotspot(p9, {text: "第9个点"});
map.addHotspot(h9);
var p10 = new BMap.Point(11.77427,14.939957);var h10 = new BMap.Hotspot(p10, {text: "第10个点"});
map.addHotspot(h10);
var p11 = new BMap.Point(11.77427,20.855394);var h11 = new BMap.Hotspot(p11, {text: "第11个点"});
map.addHotspot(h11);
var p12 = new BMap.Point(-10.596843,8.562041);var h12 = new BMap.Hotspot(p12, {text: "第12个点"});
map.addHotspot(h12);
var p13 = new BMap.Point(-27.669534,21.131844);var h13 = new BMap.Hotspot(p1, {text: "第13个点"});
map.addHotspot(h13);
var p14 = new BMap.Point(-36.20588,23.866825);var h14 = new BMap.Hotspot(p14, {text: "第14个点"});
map.addHotspot(h14);
var p15 = new BMap.Point(-15.600908,-23.866825);var h15 = new BMap.Hotspot(p15, {text: "第15个点"});
map.addHotspot(h15);
var p16 = new BMap.Point(-4.709708,-10.024106);var h16 = new BMap.Hotspot(p16, {text: "第16个点"});
map.addHotspot(h16);
var p17 = new BMap.Point(19.427545,-4.145408);var h17 = new BMap.Hotspot(p17, {text: "第17个点"});
map.addHotspot(h17);
var p18 = new BMap.Point(47.09708,-13.50419);var h18 = new BMap.Hotspot(p18, {text: "第18个点"});
map.addHotspot(h18);
var p19 = new BMap.Point(55.633426,-8.854941);var h19 = new BMap.Hotspot(p19, {text: "第19个点"});
map.addHotspot(h19);
var p20 = new BMap.Point(-57.105209,2.370216);var h20 = new BMap.Hotspot(p20, {text: "第20个点"});
map.addHotspot(h20);
var p21 = new BMap.Point(-48.274507,-4.736327);var h21 = new BMap.Hotspot(p21, {text: "第21个点"});
map.addHotspot(h21);
var p22 = new BMap.Point(-56.222139,-30.699049);var h22 = new BMap.Hotspot(p22, {text: "第22个点"});
map.addHotspot(h22);&/&/span&script&
&/&/span&body&
&/&/span&html&
获取地图上的经纬度
可以使用以下代码获取地图上任意点的经纬度。
//点击获取屏幕经纬度map.addEventListener("click",function(e){
document.getElementByIdx_x_x("info").innerHTML += e.point.lng + "," + e.point.lat + "";
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。你看不到我~
看不到我……
醉语言工具V1.8如何设置店招模块
醉语言工具V1.8如何设置店招模块
分享给好友
醉语言工具V1.8如何设置店招模块
下载至电脑
扫码用手机看
用或微信扫码在手机上继续观看
二维码2小时内有效
把视频贴到Blog或BBS&&
<input id="link4" type="text" class="form_input form_input_s" value=''>
flash地址:
<input type="text" class="form_input form_input_s" id="link3" value=''>
手机扫码分享视频
二维码2小时内有效
醉语言工具V1.8如何设置店招模块
扫码用手机继续看
用或微信扫码在手机上继续观看
二维码2小时内有效，扫码后可分享给好友
没有优酷APP？立即下载
请根据您的设备选择下载版本
醉语言工具V1.8如何设置店招模块
万万表情系列（VIP会员专享）
泡芙表情系列（VIP会员专享）
暴漫表情系列（VIP会员专享）
醉爱秀店铺装修工具V1.8版本视频教程
播放数: 46,453
<mendVideo();
播放数:1,904,363
最近更新:2年前
播放数:1,468,039
最近更新:2年前
播放数:1,255,993
最近更新:2年前
播放数:931,657
最近更新:2年前
播放数:874,687
最近更新:2年前
播放数:788,149
最近更新:2年前
节目制作经营许可证京字670号
药品服务许可证(京)-经营-你看不到我~
看不到我……
第9集分享喜欢二维码如何添加
第9集分享喜欢二维码如何添加
分享给好友
第9集分享喜欢二维码如何添加
下载至电脑
扫码用手机看
用或微信扫码在手机上继续观看
二维码2小时内有效
把视频贴到Blog或BBS&&
<input id="link4" type="text" class="form_input form_input_s" value=''>
flash地址:
<input type="text" class="form_input form_input_s" id="link3" value=''>
手机扫码分享视频
二维码2小时内有效
第9集分享喜欢二维码如何添加
扫码用手机继续看
用或微信扫码在手机上继续观看
二维码2小时内有效，扫码后可分享给好友
没有优酷APP？立即下载
请根据您的设备选择下载版本
第9集分享喜欢二维码如何添加
万万表情系列（VIP会员专享）
泡芙表情系列（VIP会员专享）
暴漫表情系列（VIP会员专享）
醉语言工具使用说明
播放数: 217,896
<mendVideo();
播放数:1,904,363
最近更新:2年前
播放数:1,468,039
最近更新:2年前
播放数:1,255,993
最近更新:2年前
播放数:931,657
最近更新:2年前
播放数:874,687
最近更新:2年前
播放数:788,149
最近更新:2年前
节目制作经营许可证京字670号
药品服务许可证(京)-经营-你看不到我~
看不到我……
醉语言工具V1.8多层固定背景（S1制作）
醉语言工具V1.8多层固定背景（S1制作）
分享给好友
醉语言工具V1.8多层固定背景（S1制作）
下载至电脑
扫码用手机看
用或微信扫码在手机上继续观看
二维码2小时内有效
把视频贴到Blog或BBS&&
<input id="link4" type="text" class="form_input form_input_s" value=''>
flash地址:
<input type="text" class="form_input form_input_s" id="link3" value=''>
手机扫码分享视频
二维码2小时内有效
醉语言工具V1.8多层固定背景（S1制作）
扫码用手机继续看
用或微信扫码在手机上继续观看
二维码2小时内有效，扫码后可分享给好友
没有优酷APP？立即下载
请根据您的设备选择下载版本
多层固定背景（S1制作）
万万表情系列（VIP会员专享）
泡芙表情系列（VIP会员专享）
暴漫表情系列（VIP会员专享）
醉爱秀店铺装修工具V1.8版本视频教程
播放数: 46,453
<mendVideo();
播放数:1,904,363
最近更新:2年前
播放数:1,468,039
最近更新:2年前
播放数:1,255,993
最近更新:2年前
播放数:931,657
最近更新:2年前
播放数:874,687
最近更新:2年前
播放数:788,149
最近更新:2年前
节目制作经营许可证京字670号
药品服务许可证(京)-经营-V1.8.150811 新增铅笔工具. []
V1.8.150806 新增定时自动存储.新增左侧面板拖动存放。 []
V1.8.150122 新增图层面板多选图层功能. 按Shift多选，Alt单选 []
V1.8.150116 新增任意图层多重嵌套功能 []
V1.8.150112 新增图层锁定功能 []
V1.8.141225 更新宝贝分类选择器 []
V1.8.141124 更新右键菜单,更符合操作习惯 []
V1.8.141110 新增HTML组件css3边框动画 []
V1.8.141107 新增开关灯组件 []
V1.8.141106 新增遮罩层组件 []
V1.8.141104 新增增强型css3编辑器 []
V1.8.141031 新增任意定时器数字宽度，设置后可自动居中 []
V1.8.141025 新增自定义图层名称功能 []
V1.8.141024 新增可关闭图层默认展开或者关闭 []
V1.8.141023 新增可关闭图层组件 []
V1.8.0 全新界面,组件面板可拖动组合，功能更人性化，新增任意轮播、自定义弹出、手风琴、宝贝分类、任意定义器等功能
V1.6.4 新增标尺,自动对齐,任意图层之图层动画 []
V1.6.3 新增分享,醉爱秀之我要秀上场 []
V1.6.2 增加快捷键删除(DEL),复制(Ctrl+C)粘贴(Ctrl+V) []
V1.6.1 独立出购物车/视频/HTML/爱淘/微淘/淘伴组件 []
V1.6.0 全新界面,PS风格,操作更便捷 []
V1.5.2 新增缩略图轮播触发方式,修改复制图层后新图层默认位置 []
V1.5.1 新增关注功能,收藏组件可选普通收藏/SNS收藏/SNS关注 []
V1.5.0 新增在线保存,读取功能.新增在线帮助
V1.4.4 新增搜索框默认文字功能
V1.4.3 新增图层面板选中后变色
V1.4.2 新增历史面板.撤销(Ctrl+Z)重做(Ctrl+Y)快捷键
V1.4.1 新增功能:1.属性面板/图层面板. 2.鼠标选中组件后,可按上下左右箭头微调.
以下快捷键在选中左侧编辑区域时有效
删除(DEL),复制(Ctrl+C)粘贴(Ctrl+V)
撤销: Ctrl+Z, 重做: Ctrl+Y,
显示/隐藏辅助线: Ctrl+H, 显示隐藏标尺: Ctrl+R
上下左右键,移动一个像素位置
以下快捷键在图层面板区域有效
多选图层(按Shift然后点击)
单选图层(按Alt然后点击)
重复点击会撤销选择
第一章 醉语言概述
1.1 醉语言的前世
在开始之前先问大家一个问题，你认为网店是什么？装修是什么？
有人就会说：网店就是网上卖东西的店呀！
对,东西放网上能摸能试吗？
当然不能！网上的东西无非就是张图片+文字描述吗！
回答相当正确!加10分!鼓掌～～（没奖品 ~@_@~）
装修就更简单了，既然是商店，当然要装修了。线下的商店装修要门脸，要灯光，墙纸，地砖什么的，网上的这些当然通通都是图片了！
OK,那接下来请客官继续往下看!
网店经过这么多年的发展已经非常成熟,装修也越来越得到广大店主的重视,接下来我们来分析一下装修中的需求！
石器时代: 文字+链接, 连张图都没有，那时候大家都是快乐原始人
青铜时代: 图片+链接, 一张图一个链接，一一对应，看哪个点哪个
铁器时代: 图片+多链接, 一张图多个链接，比如一个模特正面图，点帽子是帽子，点衣服看鞋子
白银时代: 图片+多链接+弹出, 不止是链接，移动到衣服上，弹出衣服的详细信息，移动到鞋子上，看到鞋子的相关参数
黄金时代: 不再满足与单一的链接需求，要求更多更眩的效果，可以倒计时，需要有动画，可以加滚动，想要有轮播
白金时代: 不止效果要好，还得随时能变，想什么时候改就什么时候改，想怎么变就怎么变
亲，现在问题来了。
店主：小店才几个钱，请只程序猿来干这些？养的起吗？
美工：我做做图还凑合，做这些杀了我吧～～～
还是去模板市场逛逛找个模板算了！醉悠枫？哦，挺好看的，试试吧，看评价还不错
亲,这里能改颜色吗？
亲,这里能换张图吗？
亲,这里能往下移一点吗？
亲,这里能加个倒计时吗？
亲,这里我想要个搜索框，能加一个吗？
亲,这个图我想有旋转动画，那谁谁谁家就有，你们的怎么就作不了？
亲,轮播我想要导航小图在左边，箭头在下边
亲,谁谁谁家有关注，你们怎么能没有呢？
亲,我们明天要上活动！今晚必须作完，活动页要有xxxxxxx
这么多的能不能，每天有无数种能不能烦恼着醉悠枫的那只可怜的程序猿～,狗急了还要跳墙,兔子急了还要咬人,那猿急了该怎么办
终于有一天，此猿受不了没完没了的能不能，受不了淘宝规则一天一小变，一周一大变的改动，决定作一个系统以不变应万变！于是醉语言诞生了！
1.2 醉语言的今生
最初的醉语言只提供了简单的多链接功能,一张背景图,以及在图片上的热点数据，就构成了最基础的醉语言选项。
名词解释：
热点---页面上可以点击的区域，点击之后打开一个新页面或者跳转到某个指定位置
热点数据---多个热点信息(位置,链接,大小等)的集合
经过长期的发展，醉语言提供的功能已经远不止热点这一个功能，且其他的需求都源自于热点，都可看作热点的补充和扩展，所以醉语言设置项一直保留热点数据的名称。
只要一个图片一个链接，不想用什么热点？那就直接在热点数据框中输入链接地址
不想使用醉语言功能，还想用之前的切片？醉语言完全兼容HTML，你的切片代码可以直接贴到热点数据框里
在模板中醉语言解释器功能将这些完全隐藏起来，全智能判断，输入什么都能显示出来
在编辑器中通过标准组件的形式，将美工与代码隔离，无需写任何代码，只需要设置组件的设置项，拖动到想要的位置，实时预览，所见即所得。
模板和编辑器之间通过导入导出联系起来，编辑器生成严格符合淘宝规则的代码，导出复制到模板里，就可以得到效果
现在店主笑了～～ o(∩∩)o...哈哈,我想要这个，想要那个，通通都想要，都能作了
现在美工哭了～～ 呜呜,本来之前的模板作不了，老板也放弃了，我都偷着乐了，可现在....
1.3 醉语言的未来
醉语言设计用来替代复杂的DW，让店主/美工无需学习专业网页设计，无需调试代码，调试各式各样的浏览器兼容。
引入美工最熟悉的PS工具中的图层概念，将网店变成多个图层的结合。整个店铺装修其实就是背景图与多个图层的叠加。
操作上也延续PS的习惯，选中图层后按上下左右箭头移动，顶部标题栏提示当前 x,y值，信息面板/图层面板/历史面板，一切如同与网页版PS
未来醉语言将致力于更加符合美工习惯，无需学习即可快速使用。
第二章 醉语言入门
2.1 演示-宽屏海报
2.2 演示-店招制作
2.3 演示-固定背景
2.4 演示-导航编辑
2.5 多选快捷键辅助线的使用
完善中。。尽请期待
第三章 醉语言组件说明
3.2 任意图层
3.3 任意文本
3.4 宝贝展示
3.5 倒计时
3.6 旺旺与旺旺群
3.7 搜索框
天猫关注使用如下:
3.12 缩略图轮播
3.14 整页背景图
3.15 宝贝列表
第四章 醉语言模板地址