示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 入门指南 >

高德 开发 地图 JS API 入门指南

更新时间:2018年04月20日

亲手试一试

入门指南带您迅速了解高德地图JavaScript API的基本使用,学习如何基于高德地图JavaSctipt API开始地图应用的开发,使您在最短时间内成为JavaScript API的开发者。

HELLO WORLD

如下代码可以实现一个简单的全屏展示的地图Demo

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
      }
    </style>
    <title>快速入门</title>
  </head>
  <body>
    <div id="container" tabindex="0"></div>
    <script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript">
        var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 10,
            center: [116.480983, 40.0958]
        });
    </script>
  </body>
</html>

下面我们分步介绍如何快速开始地图开发:

申请JSAPI的开发者Key

点我跳转申请地址

在页面中引入高德地图JavaScript API入口脚本

<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script> 

创建地图容器

在页面body里你想展示地图的地方创建一个div 容器,并指定id标识:

<div id="container"></div>  

給地图容器指定大小

可以使用CSS为地图容器设置合适的大小,比如:

#container {width:300px; height: 180px; }  

创建地图

如上准备工作完成之后,就可以开始创建地图了。生成一副简单地图只需要一句代码,将我们刚刚创建的div的id传给Map的构造函数即可,这个时候API将根据用户所在的城市自动进行地图中心点和级别的设定:

var map = new AMap.Map('container');

设定地图的中心点和级别

我们一般需要给地图按需设定中心点和坐标等属性,这里可以通过两种方式,第一种,直接在地图初始化的时候传入相关属性,center属性的值可以是经纬度的二元数组,也可以是AMap.LngLat对象,要求经度值在前,纬度值在后:

var map = new AMap.Map('container',{
    zoom: 10,
    center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
});

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

var map = new AMap.Map('container');
map.setZoom(10);
map.setCenter([116.39,39.9]);

JavaScript API提供了丰富的覆盖物,比如Marker点标记、Polyline折线、Polygon多边形、Circle圆等。以Marker为例, 我们创建一个最简单的Marker,并将它添加到地图上:

var marker = new AMap.Marker({
    position: [116.480983, 39.989628],//marker所在的位置
    map:map//创建时直接赋予map属性
});
//也可以在创建完成后通过setMap方法执行地图对象
marker.setMap(map);

关于移动端地图应用的开发

JavaScript API自1.3版本起开始支持iPhone、Android等移动平台的展示和交互。用户通过手机浏览器就可以访问由地图JavaScript API创建出来的应用。为了更好的在手机浏览器上展示地图,我们有如下建议:

 

  • 按照实际需要为地图容器指定合适的大小。
  • 单页面开发时复用地图对象及其DOM元素,避免地图的重复创建和绘制。
  • 为了保证地图的清晰显示和最佳性能,请通过viewport设置页面显示比例为1,并禁止用户缩放页面,添加如下meta标签:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

关于JavaScript API UI组件库

UI组件库是基于 JavaScript API 基本功能接口与服务接口开发的一套组件库,封装了大量实用的组件,侧重于帮助开发者快速实现地图上附加功能开发,同时满足灵活定制的个性化展示需求,详情请参考UI组件库简介。

关于HTTPS的支持

高德地图JavaScript API自1.3版本开始完全支持HTTPS协议:

 

  • 对于需要使用定位接口的开发者,请升级站点到HTTPS(iOS10、Chrome新版浏览器等环境已禁用非安全页面的浏览器定位)
  • HTTPS站点在引用JavaScript API的时候需要修改引用地址的协议为https:
<script type="text/javascript" data-src="https://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script> 

关于插件的使用说明

高德地图JavaScript API在核心功能之外提供了丰富的控件、服务插件以及工具插件,比如工具条、比例尺、路线规划、高级信息窗体等等,详细清单见下方总览,在使用这些接口之前需要使用AMap.plugin方法将对应的功能加载下来,然后才能创建相应的对象。比如在本页面顶端的demo中我们添加了工具条和高级信息窗体,代码如下:

AMap.plugin(['AMap.ToolBar','AMap.AdvancedInfoWindow'],function(){
    //创建并添加工具条控件
    var toolBar = new AMap.ToolBar();
    map.addControl(toolBar);
    //创建高级信息窗体并在指定位置打开
    var infowindow = new AMap.AdvancedInfoWindow({
      content: '<div class="info-title">高德地图</div><div class="info-content">'+
            '<img data-src="http://webapi.amap.com/images/amap.jpg">'+
            '高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br>'+
            '<a target="_blank" href="http://mobile.amap.com/">点击下载高德地图</a></div>',
      offset: new AMap.Pixel(0, -30)
    });
    infowindow.open(map,[116.480983, 39.989628]);
})

插件类总览

类名

类功能说明

AMap.ToolBar

工具条,控制地图的缩放、平移等

AMap.Scale

比例尺,显示当前地图中心的比例尺

AMap.OverView

鹰眼,显示缩略图

AMap.MapType

图层切换,用于几个常用图层切换显示

AMap.Geolocation

定位,提供了获取用户当前准确位置、所在城市的方法

AMap.AdvancedInfoWindow

高级信息窗体,整合了周边搜索、路线规划功能

AMap.Autocomplete

输入提示,提供了根据关键字获得提示信息的功能

AMap.PlaceSearch

地点搜索服务,提供了关键字搜索、周边搜索、范围内搜索等功能

AMap.PlaceSearchLayer

搜索结果图层类,将搜索结果作为图层展示

AMap.DistrictSearch

行政区查询服务,提供了根据名称关键字、citycode、adcode来查询行政区信息的功能

AMap.LineSearch

公交路线服务,提供公交路线相关信息查询服务

AMap.StationSearch

公交站点查询服务,提供途经公交线路、站点位置等信息

AMap.Driving

驾车路线规划服务,提供按照起、终点进行驾车路线的功能

AMap.TruckDriving

货车路线规划

AMap.Transfer

公交路线规划服务,提供按照起、终点进行公交路线的功能

AMap.Walking

步行路线规划服务,提供按照起、终点进行步行路线的功能

AMap.Riding

骑行路线规划服务,提供按照起、终点进行骑行路线的功能

AMap.DragRoute

拖拽导航插件,可拖拽起终点、途经点重新进行路线规划

AMap.ArrivalRange

公交到达圈,根据起点坐标,时长计算公交出行是否可达及可达范围

AMap.Geocoder

地理编码与逆地理编码服务,提供地址与坐标间的相互转换

AMap.CitySearch

城市获取服务,获取用户所在城市信息或根据给定IP参数查询城市信息

AMap.IndoorMap

室内地图,用于在地图中显示室内地图

AMap.MouseTool

鼠标工具插件

AMap.CircleEditor

圆编辑插件

AMap.PolyEditor

折线、多边形编辑插件

AMap.MarkerClusterer

点聚合插件

AMap.RangingTool

测距插件,可以用距离或面积测量

AMap.CloudDataLayer

云图图层,用于展示云图信息

AMap.CloudDataSearch

云图搜索服务,根据关键字搜索云图点信息

AMap.Weather

天气预报插件,用于获取未来的天气信息

AMap.RoadInfoSearch

道路信息查询,已停止数据更新,反馈信息仅供参考

AMap.Hotspot

热点插件,地图热点已默认开启,不用手动添加,由Map的isHotspot属性替代

AMap.Heatmap

热力图插件

移动端
示例中心
功能
在线体验
常见问题