高德地图api(基础版)

高德地图使用的基础方法

第一步:申请高德地图key码

申请地址:http://lbs.amap.com/dev/key

申请高德地图key码

第二步:引入高德地图JavaScript API入口脚本:

把key“您申请的key值”替换成申请的key码

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script><script id="amap_main_js" src="http://webapi.amap.com/maps/main?v=1.3&key=您申请的key值&m=http,map,anip,layers,overlay0,brender,mrender,mouse,vectorlayer,overlay,wgl,sync&vrs=1.3.21.1" type="text/javascript"></script>

第三步:添加容器、设定容器样式

#container {width:300px; height: 180px; } 
<div id="container"></div> 

第四步:开始创建地图

  1. 生成一副简单地图只需要一句代码,将我们刚刚创建的div的id传给Map的构造函数即可,这个时候API将根据用户所在的城市自动进行地图中心点和级别的设定:var map = new AMap.Map('container');
  2. 设定地图中心和级别
    我们一般需要给地图按需设定中心点和坐标等属性,这里可以通过两种方式,第一种,直接在地图初始化的时候传入相关属性,center属性的值可以使经纬度的二元数组,也可以是AMap.LngLat对象,要求经度值在前,纬度值在后:
var map =  new AMap.Map( 'container' ,{
zoom: 10,
center: [116.39,39.9]
});

也可以在地图初始化过后,任何需要的地方通过方法来改变地图的中心点和级别

var map =  new AMap.Map( 'container' );
map.setZoom(10);
map.setCenter([116.39,39.9]);
Map基本参数表
  1. 点标记的创建、添加与删除
//点标记的创建、添加
var marker =  new AMap.Marker({
 position: [116.480983, 39.989628],
 map:map
});
//也可以在创建之后按需更改这些属性:
var marker =  new AMap.Marker();
marker.setMap(map);
//移除的话,同样使用setMap方法,不传参数或者传入空参数:
marker.setMap();
标记点

第五步:添加信息窗口

信息窗体一样可以在创建的时候设定内容、偏移量、大小等属性,offset是信息窗体的锚点以position为基准位置的像素偏移量,content除了使用字符串的形式外也可以直接设定为某个创建好的DOM节点:

//信息窗体显示
var infowindow = new AMap.InfoWindow({
  content:  '<h3>北京</h3><div>北京首都欢迎你!</div>',
  offset:  new AMap.Pixel(0, -30),
  size: new AMap.Size(230,0)
})
//监听事件让信息窗体显示
infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
  // 也可以通过事件监听,在需要的时候才将信息窗体显示出来,比如在marker被单击的时候显示
var clickHandle = AMap.event.addListener(marker, 'click', function() {
  infowindow2.open(map, marker.getPosition())
})
//信息框移除
// AMap.event.removeListener(clickHandle);
使用高级信息窗体
// 高级信息框
AMap.plugin('AMap.AdvancedInfoWindow',function(){
  var infowindow = new AMap.AdvancedInfoWindow({
    content: '<h3 class="title">高德地图</h3>'+
             '<div class="content">高德是中国领先的数字地图内容、'+
             '导航和位置服务解决方案提供商。</div>',
    offset: new AMap.Pixel(0, -30),
    asOrigin:false
  });
  infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
})
//绑定事件信息窗体显示
infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
var clickHandle = AMap.event.addListener(marker, 'click', function() {
    infowindow2.open(map, marker.getPosition())
})
信息框

第六步:添加工具条和比例尺

AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
    //TODO  创建控件并添加
    var toolBar = new AMap.ToolBar();
    var scale = new AMap.Scale();
    map.addControl(toolBar);
    map.addControl(scale);
})
//要移除控件的时候调用地图的removeControl方法即可
//map.removeControl(toolBar);
添加工具条和比例尺

第七步:添加鹰眼

// 显示鹰眼
AMap.plugin([AMap.OverView'],
    function(){
        map.addControl(new AMap.OverView({isOpen:true}));
});
鹰眼控件

第八步:室内地图

  1. 场景一:使用默认室内地图
function init(){
   var map = new AMap.Map('container', {
       resizeEnable: true,
       center: [117.000923, 36.675807],
       zoom: 6
   });
   // 添加室内地图
   map.on('indoor_create',function(){
       map.indoorMap.showIndoorMap('B000A856LJ',5);
   })
}

![室内地图](http://upload-images.jianshu.io/upload_images/1986499-f7572eb761210cea.png? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  1. 场景二:单独或者叠加显示某个商场的室内地图
    要实现上述功能,首先引入室内地图插件,初始化室内底图对象,通过设置地图的layers属性(这里将地图设置为只显示室内地图)。然后通过设定室内建筑ID使地图显示到指定的室内区域,这里我们展示朝阳大悦城:
    map.on('indoor_create',function(){
        // 商场一楼
        map.indoorMap.showIndoorMap('B000A856LJ',1);
        AMap.plugin(['AMap.IndoorMap'], function() {
            var indoorMap = new AMap.IndoorMap({alwaysShow:true});
            //设定在没有矢量底图的时候也显示,默认情况下室内图仅在有矢量底图的时候显示
            var map = new AMap.Map('mapDiv', {
                resizeEnable: true,
                showIndoorMap:false,//隐藏地图自带的室内地图图层
                layers:[indoorMap]

            });
        });
    })

我们可以在showIndoorMap方法里同时指定室内地图的展示楼层为商铺对应的楼层,比如联想专卖店在朝阳大悦城的五层: indoorMap.showIndoorMap('B0FFFAB6J2',5); 我们也可以将室内地图和其他图层叠加使用,只需要修改上面示例代码中map的layers属性或者调用其他图层的setMap方法: layers:[indoorMap,new AMap.TileLayer()] //或者 new AMap.TileLayer().setMap(map);

商场室内地图

未完待续...(参考高德地图开发入门指导)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容

  • 本文把高德地图的鼠标点击获取经纬度与点标记与地理编码融合到了一起 首先要创建自己的应用,并且添加key(服务用到的...
    RocaLee阅读 2,893评论 0 2
  • 项目中用到地图的地方越来越多,从O2O商城、出行、交通、单车等无处不在使用地图,以下是在多个项目中集成高德地图常用...
    倔强的炉包阅读 18,411评论 6 21
  • 因为要做一个地图操作的项目,需要用到这个地图库,但是查询官方API麻烦,而且这个地图框架的API做的用起来确实太麻...
    虚幻的锈色阅读 33,756评论 1 15
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,599评论 18 139
  • 很多人都会遇到这种情况,在学习过程中,遇到一些问题一直绕不过去,导致停止不前了,但又找不到突破口,从而出现半途而废...
    王梓文阅读 1,703评论 5 9