【高德地图API】从零开始学高德JS&API（一）地图展现—仙剑地图，麻点图，街景，室内图-地理信息-技术专栏-GIS空间站
http://www.gissky.net- GIS空间站
网站资讯通告:
您现在的位置：&&>>&&>>&&>>&正文
【高德地图API】从零开始学高德JS&API（一）地图展现—仙剑地图，麻点图，街景，室内图
摘要：关于地图的显示，我想大家最关心的就是麻点图，自定义底图的解决方案了吧。在过去，marker大于500之后，浏览器开始逐渐卡死，大家都开始寻找解决方案，比如聚合marker啊，比如麻点图啊。聚合marker里面还有一些复杂的算法，而麻点图，最让大家头疼的，就是如何生成麻点图，如何切图，如何把图片贴到地图上，还有如何定位图片的位置吧。以前那么复杂的一系列操作，居然让云图的可视化操作一下子解决了。现在只要点一点鼠标，麻点图就自动生成了。真是广大LBS开发者的福音。
以前写过从零开始学百度地图API系列，写得比较浅显。如今，自己在LBS领域成长了几年，学到比较多的专业知识，所以此次再次写到”从零系列”，希望加上更多功能，更多想法。比如这期的地图展现，不单单只是告诉大家，一张2D地图如何用代码写出来，同时，还会加上3D地图，卫星图，街景，交通流量图，麻点图，仙剑奇侠传地图等。也希望借此可以和大家更多的交流。
-----------------------------------------------------------------------
一、万物的首先第一步，当然是申请一个key。
登录之后，点新建地图，就有一个自动的key了。
key在右上角密钥管理处
二、 2D地图
2D地图，就是一张普通的高德地图。只需要简单几句话就可以实现。&
var point = new AMap.LngLat(120..290422);
function mapInit(){
//初始化地图对象，加载地图。
mapObj = new AMap.Map("iCenter",{
center : point, //地图中心点
level : 15
//地图显示的缩放级别
其中，level指的是地图级别，默认为[3,18]。3为世界地图，18为街道级地图。
center指的是地图的中心点，可以用坐标拾取工具来取点。坐标拾取工具：
2D效果图：
三、实时路况
添加实时路况，只需要两句话
var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
trafficLayer.setMap(mapObj);
//添加实时路况图层
消除实时路况有2种方法，一是隐藏hide方法，二是重置地图setMap(null)
trafficLayer.setMap(null);
//隐藏实时路况图层
trafficLayer.hide();
//隐藏实时路况图层
实时路况效果：
四、路网，卫星图
路网、卫星图，都跟实时路况路况差不多，只是换了个类名。
添加路网、卫星图，只需要两句话
var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //实例化路网图层
roadNetLayer.setMap(mapObj); //在map中添加路网图层
var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //实例化卫星图
satellLayer.setMap(mapObj); //在map中添加卫星图
消除路网、卫星图，有2种方法，一是隐藏hide方法，二是重置地图setMap(null)
roadNetLayer.setMap(null); //隐藏路网
roadNetLayer.hide(); //隐藏路网
satellLayer.setMap(null);
//隐藏卫星图
satellLayer.hide();
//隐藏卫星图
路网、卫星图效果：&
五、3D地图
3D地图，是在地图比较详细的级别17-18的时候，有三维楼块效果的地图。
所以，要看到3D效果，必须把地图级别调整到17-18才可以看到。
var buildingLayer = new AMap.Buildings(); //实例化3D地图图层
buildingLayer.setMap(mapObj); //在map中添加3D图层
mapObj.setZoom(18); //改变地图级别到17-18
3D地图没有hide方法，所以隐藏他，需要重置地图。
buildingLayer.setMap(null);
3D地图效果：&
六、麻点图
（记得以前研究百度地图API的时候，麻点图的制作很苦难，要自己去对准坐标，自己生成麻点图，然后自己切片……实在费力……）
高德地图API最好用的就是麻点图。不用自己生成麻点图，不用自己切图。只需要在云图上点一点，就可以完成所有操作。
打开云图管理台：
新建或打开已有的地图：
点右上角的按钮，可以手工一个一个标注你自己的麻点。
当然也可以批量导入你的数据。
数据填充完毕后，记录下你的tableid。这就是你的云图层（麻点图）的id，放到下面的代码里。
//加载云图层插件
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
var cloudDataLayer = new AMap.CloudDataLayer('【您的tableid】', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
云图层，就是麻点图，是实时渲染的，你在云图管理台操作之后，立马在你的前台得到显示。
这真是我用过最好用的麻点图了。marker大于500之后，终于有如此方便的解决方案了。
更多关于云图的教程，可以看我以前发过的教程
三甲医院例子：
东莞酒店例子：
七、仙剑地图
&这个算是投机取巧，将仙剑地图直接覆盖在高德地图上，属于图片覆盖物。
图片覆盖物需要指定一个显示范围，取左下角和右上角。
显示范围设定后，不管地图放大缩小，图片都只在这个范围中显示。
这样的图片覆盖物，比较适合制作校园地图，厂区地图，小区地图等。
而且，跟云图一样，图片覆盖物不需要切图。
（又想感叹一句！真真是开发者的福音！为何高德API做得那么好，之前我都不知道！！）
var bounds = new AMap.Bounds(new AMap.LngLat(120..271596), new AMap.LngLat(120..309171)),
groundImageOpts = {
opacity: 1,
//图片透明度
clickable: true,//图片相应鼠标点击事件，默认：false
map: mapObj
//图片叠加的地图对象
//实例化一个图片覆盖物对象
var groundImage = new AMap.GroundImage('xianjian.jpg', bounds, groundImageOpts);
仙剑地图效果：
八、自定义地图
&这里用谷歌的底图作为例子，将高德底图直接换为谷歌底图。跟上一段的内容不一样，不是图片覆盖物那么简单哦。
&高德的切图方式，和谷歌的一样。所以，在网上找的谷歌地图的切图工具，都可以适用于高德地图。
google = new AMap.TileLayer({
tileUrl:"http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil"//图块取图地址
google.setMap(mapObj);
谷歌地图：
高德地图街景覆盖城市共33个，分别为：杭州，南京，成都，西安，拉萨，昆明，烟台，沈阳，哈尔滨，长春，常州，南通，林芝，泰安，日照，那曲，东营，日喀则，德州，滨州，聊城，莱芜，郑州，洛阳，平顶山，开封，安阳，信阳，新乡，焦作，商丘，周口，驻马店。
使用街景，必须将您的网页文件传到服务器上。
var opts = {
heading:270,
position: point
var panorama = new AMap.Panorama('iCenter',opts);
position，就是街景的位置，必须在33个城市有街景的范围内，才能看到街景哦。可以先到amap上看一眼，哪里有街景，然后再设置您的街景位置。高德地图
街景效果：
十、全部源代码，请点击这里：
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&地图展示&/title&
&link rel="stylesheet" type="text/css" href="zero.css" /&
&script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"&&/script&
&body onLoad="mapInit()"&
&div id="iCenter"&&/div&
&div id="iControlbox"&
&p id="lnglat"&&/p&
&button onclick="to2D();"&2D地图&/button&
&p&是一张普通的地图，地图级别是13。&/p&
&button onclick="addTraffic();"&实时路况&/button&
&p&叠加上实时交通，路况信息。红色最堵。&/p&
&button onclick="addRoadNetLayer();"&路网&/button&
&p&叠加上路网&/p&
&button onclick="yunLayer();"&麻点图&/button&
&p&麻点图，就是云图的云图层显示。&/p&
&button onclick="addsatellLayer();"&卫星图&/button&
&p&换上卫星图&/p&
&button onclick="addBuildingLayer();"&3D地图&/button&
&p&显示3D楼块，只有地图级别在会显示。&/p&
&button onclick="googlMap();"&自定义底图&/button&
&p&自定义底图，是需要自己切图的。这里展示了谷歌的底图。&/p&
&button onclick="xianjianLayer();"&仙剑地图&/button&
&p&显示的仙剑地图，感觉很帅。其实这是一个图片覆盖物，而不是图层。&/p&
&button onclick="jiejing();"&街景&/button&
&p&显示街景，点了这个要刷新才能回来，哈哈。&/p&
&script language="javascript"&
var point = new AMap.LngLat(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0.148373,<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #.290422);
var buildingLayer = new AMap.Buildings(); //实例化3D地图图层
var trafficLayer = new AMap.TileLayer.Traffic({zIndex:<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #}); //实时路况图层
var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #}); //实例化路网图层
var satellLayer = new AMap.TileLayer.Satellite({zIndex:<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #}); //实例化卫星图
function mapInit(){
//初始化地图对象，加载地图。
mapObj = new AMap.Map("iCenter",{
center : point, //地图中心点
level : <SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #
//地图显示的缩放级别
AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
//鼠标点击，获取经纬度坐标
function getLnglat(e){
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("lnglat").innerHTML = x + "," +
function addBuildingLayer(){
//<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #D网
buildingLayer.setMap(mapObj); //在map中添加3D图层
satellLayer.setMap(null);
//隐藏卫星图
//cloudDataLayer.setMap(null);
mapObj.setZoom(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #);
function addTraffic(){
//交通，实时路况
trafficLayer.setMap(mapObj);
//添加实时路况图层
roadNetLayer.setMap(null);
//隐藏路网图层
satellLayer.setMap(null);
//隐藏卫星图
//cloudDataLayer.setMap(null);
mapObj.setZoom(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #);
function addRoadNetLayer(){
roadNetLayer.setMap(mapObj); //在map中添加路网图层
trafficLayer.setMap(null);
//隐藏实时路况图层
satellLayer.setMap(null);
//隐藏卫星图
//cloudDataLayer.setMap(null);
mapObj.setZoom(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #);
function to2D(){
buildingLayer.setMap(null);
roadNetLayer.setMap(null);
trafficLayer.setMap(null);
mapObj.setZoom(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #);
groundImage.hide();
google.setMap(null);
//cloudDataLayer.setMap(null);
function addsatellLayer(){
satellLayer.setMap(mapObj); //在map中添加卫星图
buildingLayer.setMap(null);
roadNetLayer.setMap(null);
trafficLayer.setMap(null);
//cloudDataLayer.setMap(null);
mapObj.setZoom(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #);
function yunLayer(){
buildingLayer.setMap(null);
roadNetLayer.setMap(null);
trafficLayer.setMap(null);
mapObj.setZoom(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #);
//groundImage.hide();
//加载云图层插件
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
var cloudDataLayer = new AMap.CloudDataLayer('<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #58f853e4b1', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
function xianjianLayer(){
var bounds = new AMap.Bounds(new AMap.LngLat(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0.120993,<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #.271596), new AMap.LngLat(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0.184593,<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #.309171)),
groundImageOpts = {
opacity: <SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #,
//图片透明度
clickable: true,//图片相应鼠标点击事件，默认：false
map: mapObj
//图片叠加的地图对象
//实例化一个图片覆盖物对象
var groundImage = new AMap.GroundImage('xianjian.jpg', bounds, groundImageOpts);
//mapObj.setBounds(bounds);
mapObj.setZoom(<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #);
function googlMap(){
buildingLayer.setMap(null);
//mapObj.setZoom(15);
google = new AMap.TileLayer({
tileUrl:"http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil"//图块取图地址
google.setMap(mapObj);
function jiejing(){
var opts = {
heading:<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0,
pitch:<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #
position: point
var panorama = new AMap.Panorama('iCenter',opts);
示例demo在线看：
效果预览：
上一篇文章： 下一篇文章：
相关文章列表
关于我们 - 联系我们 - 广告服务 - 友情链接 -地图类APP如何实现盈利让用户买单
我的图书馆
地图类APP如何实现盈利让用户买单
阿里宣布拟以每股美国存托股票21美元的价格全资收购高德公司，无论是媒体还是自媒体人都嗅出了不同的芬芳，唱红、唱黑者皆有，空气中弥散着阿里和高德新的体味。
地图工具之所以如此受到BAT们的重视，除了它是最基本的指路工具以外，它还是一个基础的给其他应用场景提供增值服务的工具，就像社交工具一样，围绕社交建立起来的多功能体系，和社交不同的是，地图工具更像是现实生活，如果把使用地图工具的用户标记出来，你会发现原来其他的用户离你如此之近。
百度地图、高德地图、腾讯地图纷纷开放了API(Application Programming Interface,应用程序编程接口)接口，以提供给开发者借助地图工具完成更多的应用场景开发，比如社交工具、音乐类APP、酒店类APP等，都可以应用地图工具来开发出更丰富的使用场景。
对于大部分用户来说，地图工具首先是一个指路工具，为用户正确指引路线，其次才是一个提供酒店预订、餐饮预订等生活服务的平台，没有指路这一基本功能，其他的功能就会坍塌。
对于地图厂商来说，特别是高德导航、百度导航纷纷免费以后，就需要通过底层用户来盈利，盈利的方式无非是用户通过地图工具的订酒店、订餐、订电影票这些增值服务，基于此，地图就需要有大量的用户通过地图来服务才能赚钱。
这里静哥就要问了，地图们，你的用户在哪儿？这不是一个伪命题。无论是百度地图、还是高德地图用户量都破亿，从大的角度看，用户量是高，但是真正使用地图上面增值服务的有多少用户呢？这部分才是来钱的玩意儿。
我们先看几大地图的登录方式，其中百度地图支持：手机号、邮箱、百度账号、新浪微博、QQ、人人网、腾讯微博的登录；腾讯地图支持：微信、QQ登录；高德地图支持：手机号、淘宝账号、新浪微博、QQ账号、联通WO的登录。
从账号登录体系来看，百度的选择最多，腾讯地图最具有优势，无论是QQ还是微信用户量都是另外两款产品所不能企及的，高德地图的优势是可以使用淘宝账号登录，三家自身的资源在这里出现了初步竞争。
阿里收购高德公司的作用，在这里出现了一些端倪，用户可以使用淘宝账号在高德地图上使用高德地图的增值服务，用户在高德地图上的使用习惯可以和阿里的数据进行互通，在商业化的道路上，势必能够让营销更精准。
再回到用户基础系统上来，腾讯地图完全依赖于自身的ID体系，百度一部分接入自身PC端的账号体系，一方面借用第三方，高德方面淘宝的ID体系是最有优势的，这三家不同的ID体系方式预示着各自不同的战略，其中腾讯地图和高德地图最有优势，百度地图反而是最弱的。
用户使用ID体系有哪些好处呢？
（1）位置共享。用户想要将位置共享给其他用户，需要打开地图工具，找到位置共享，并通过社交工具进行位置分享，这样其他用户就能通过用户分享的位置相互沟通，位置共享应该说是“路痴”的绝对福音。微信自身带有此插件，但是腾讯地图在精准性以及其他方面存在一定的缺陷，所以百度地图和高德地图在这方面也是有机会的。
（2）订单管理。用户通过地图工具订酒店、订餐厅等，很多都是直接平台往外的，通过ID体系，用户可以查阅自己的订单管理，方便用户自己管理。
（3）参与地图活动。几大地图工具为了抢占相互的市场份额，肯定会发布一些地图方面的活动，市场的竞争对于用户总是有利的。
（4）路线收藏。用户可以通过ID系统对过往的路线以及用户试图去的地址进行路线收藏，有利于出行的时候因网络问题无法找到路线位置。
ID体系对于地图厂商又有哪些好处呢？
（1）数据互联。地图工具可将用户使用增值服务的习惯，有效的针对用户的喜好进行服务推荐，让商户的信息更精准，同时用户使用服务的习惯，可以将数据进行互通，比如高德地图和淘宝方面的数据，腾讯地图和微信购物的数据，百度地图和百度团购、百度微购等方面的数据配合。
（2）服务互联。通过ID体系，特别是高德地图和阿里的结合，用户使用高德地图订酒店、在线订餐等，再通过支付宝进行支付，同时享受起体系内的团购服务，从整个服务上门来说，用户ID体系是有利于服务之间相互关联的。没有几个用户希望通过A超市去买洗发水，却需要通过B超市去购买护发素，或者其他不方便的支付工具进行支付，最好是一条龙服务。
（3）激活僵尸粉。地图也像微博和twitter一样存在“僵尸粉”吗？答案是肯定的，单个用户并没有形成地图工具服务习惯，永远只把地图当做指路工具，即使能通过类似于百度的大数据来分析出用户的迁徙路径，构建出百度迁徙这类产品，但是从产品盈利的角度来分析，用户只有通过ID体系，成为活跃的地图用户，使用地图的增值服务，才能算做是活的粉丝，否则单个用户，和“僵尸粉”有什么区别呢？人家只是用地图来指路，地图厂商丝毫不受益。
地图用户量并不少，但是从当前的形式来看，怎样把“僵尸用户”激活，使用地图的增值服务才是当前的重中之重，用户体系是根本，促进用户激发自己进行ID方式登录。比如积分模式，用户使用ID体系使用服务，可以进行积分积累，再比如和第三方机构的合作，团购方面，商家合作，都是一种很好的合作模式。地图厂商的ID体系，也是未来其商业化的基石。
转载请注明： ?
TA的最新馆藏[转]&
喜欢该文的人也喜欢综合评分：
高德地图安卓版，中国专业的手机地图，超过6亿用户正在使用！高德地图拥有全面的地点信息，特色语音导航、智能路线规划；省流量、耗电低、空间占用小、体验流畅，是您贴心的生活助手！
智能路线规划
-语音搜索轻松查询路线，出行再无忧
-超强公交规划能力，优质路线唾手可得
-步行规划再升级，室内室外全程规划直达目的地
导航
-优质驾车路线，实时躲避拥堵
-公交全程导航，到站和换乘及时提醒，实时公交，绿色出行，省时省力
-林志玲女神语音导航，出行路上更开怀
地图数据
-深耕地图领域多年，保障地点、道路、公交数据的高准确率
-准确的定位能力，获得业内好评
-全国各城市离线地图、离线导航数据包供免费下载，享受准确数据的同时还能节省90%流量
附近资讯
-去哪吃、去哪住、去哪放松、去哪high，精彩附近板块带您逛遍身边好去处
-附近的优惠随心选，买单付款还能支付宝，高德地图体验吃喝玩乐全流程
-周末去哪儿精心推荐玩乐资讯，精彩生活不错过
【更新内容】
【亮点】
1. 新增公交换乘提醒功能，安心玩手机、看书、听音乐还有睡觉，再也不担心坐过站！
2. 实景旅游上线，看360°景点实景，覆盖全国千余个景点，你的暑期出游神器！
3. 随时查找身边钟点房，上万家钟点房任你选，便宜到爆！
4. 导航结束前主动推荐目的地附近停车场，让你一步到“位”。
5. 疯狂夺宝系统全面升级。
高德地图就是好
Ｇｐｓ地位能再准确些吗，就更完美了，还有金币兑换奖品能多些吗
安装红米3老死机
其他帐号登录:
为此应用打分：
请填写评论内容
(高速下载)
大小：18.68 MB
大小：32.00 MB
大小：20.5 MB
大小：28.00 MB
大小：14.58 MB
大小：10.32 MB
大小：28.85 MB
大小：29.05 MB
应用相关文章
大家都在玩
热门安卓应用
开心消消乐
我的世界官方版
360游戏大厅
疯狂动物园
最近浏览过的应用博主最新文章
博主热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}