【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图

</pre><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">关于地图的显示，我想大家最关心的就是麻点图，自定义底图的解决方案了吧。在过去，marker大于500之后，浏览器开始逐渐卡死，大家都开始寻找解决方案，比如聚合marker啊，比如麻点图啊。聚合marker里面还有一些复杂的算法，而麻点图，最让大家头疼的，就是如何生成麻点图，如何切图，如何把图片贴到地图上，还有如何定位图片的位置吧。以前那么复杂的一系列操作，居然让云图的可视化操作一下子解决了。现在只要点一点鼠标，麻点图就自动生成了。真是广大LBS开发者的福音。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">以前写过从零开始学百度地图API系列，写得比较浅显。如今，自己在LBS领域成长了几年，学到比较多的专业知识，所以此次再次写到”从零系列”，希望加上更多功能，更多想法。比如这期的地图展现，不单单只是告诉大家，一张2D地图如何用代码写出来，同时，还会加上3D地图，卫星图，街景，交通流量图，麻点图，仙剑奇侠传地图等。也希望借此可以和大家更多的交流。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"><img src="http://images.cnitblog.com/i/249635/201404/250834443102265.gif" alt="" style="margin:0px; padding:0px; border:0px" /></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">-----------------------------------------------------------------------</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">一、万物的首先第一步，当然是申请一个key。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">申请key：<a target=_blank target="_blank" href="http://yuntu.amap.com/datamanager/index.html" style="margin:0px; padding:0px; color:rgb(7,93,179)">http://yuntu.amap.com/datamanager/index.html</a></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">登录之后，点新建地图，就有一个自动的key了。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"> <img src="http://images.cnitblog.com/i/249635/201404/250824024829514.png" alt="" style="margin:0px; padding:0px; border:0px" /></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">key在右上角密钥管理处</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"><img src="http://images.cnitblog.com/i/249635/201404/250825098108178.png" alt="" style="margin:0px; padding:0px; border:0px" /></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">二、 2D地图</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; line-height:19.5px; font-size:13px; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:rgb(254,254,242)">2D地图，就是一张普通的高德地图。只需要简单几句话就可以实现。 </p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; background-color:rgb(245,245,245); border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important"><div class="cnblogs_code_toolbar" style="margin:5px 0px 0px; padding:0px"><span class="cnblogs_code_copy" style="margin:0px; padding:0px 5px 0px 0px; line-height:1.5"><a target=_blank target="_blank" title="复制代码" style="margin:0px; padding:0px; color:rgb(7,93,179); text-decoration:underline; border:none!important"><img src="https://i-blog.csdnimg.cn/blog_migrate/69c5a8ac3fa60e0848d784a6dd461da6.gif" alt="复制代码" style="margin:0px; padding:0px; border:none!important" /></a></span></div><pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word; font-family:'Courier New'!important"><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">var</span><span style="margin:0px; padding:0px; line-height:1.5"> mapObj;
</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">var</span> point = <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">new</span> AMap.LngLat(120.148373,30.290422<span style="margin:0px; padding:0px; line-height:1.5">);
</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">function</span> mapInit(){   <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">//</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">初始化地图对象，加载地图。</span>
    mapObj = <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,0,255)">new</span> AMap.Map("iCenter"<span style="margin:0px; padding:0px; line-height:1.5">,{
    center : point, </span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">//</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">地图中心点</span>
    level : 15  <span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">//</span><span style="margin:0px; padding:0px; line-height:1.5; color:rgb(0,128,0)">地图显示的缩放级别</span>
<span style="margin:0px; padding:0px; line-height:1.5">    });
}</span>

其中，level指的是地图级别，默认为[3,18]。3为世界地图，18为街道级地图。

center指的是地图的中心点，可以用坐标拾取工具来取点。坐标拾取工具：http://zhaoziang.com/amap/picpoint.html

2D效果图：

 

 

三、实时路况

添加实时路况，只需要两句话