为什么选择高德
成功案例
产品优势
数据优势
服务优势
精选权益
产品介绍
基础产品
地图
定位
导航
搜索
特色产品
地图小程序
3D地形图
排线调度服务
GeoHUB定制地图
企业智图
猎鹰轨迹服务
地址服务
LOCA 数据可视化
高德智慧景区
高德企业用车
解决方案
解决方案
智能派单
上门服务调度
零售铺货
智慧物流
智慧交通
出行
O2O
电商
社交
运动
智能硬件
开发支持
Web端
地图 JS API
LOCA数据可视化 API
地图组件
URI API
室内地图 JS API
地铁图 JS API
Android平台
Android 地图SDK
Android 轻量版地图SDK
Android 定位SDK
Android 导航SDK
Android 猎鹰SDK
iOS平台
iOS 地图SDK
iOS 轻量版地图SDK
iOS 定位SDK
iOS 导航SDK
iOS 猎鹰SDK
Web服务
Web服务 API
猎鹰服务 API
物流服务 API
其他
GeoHUB使用指南
微信小程序插件
高德地图手机版
地图Flutter插件
HarmonyOS 地图SDK
帮助与支持
常见问题
合规中心
开发者论坛
加入我们
地图工具
GeoHUB
坐标拾取器
地图名片
地图快速生成器
GeoHUB自定义地图
三维模型转换
服务升级
配额提升
GeoHUB自定义地图
GeoHUB数据中心
商用服务
高级能力
企业智图SaaS
云图市场
控制台
登录
注册
退出
我的消息
云图市场
应用管理
GeoHUB
JS API 2.0 示例
地图
生命周期
地图的创建
地图加载完成
地图的销毁
异步加载地图
JSAPI 加载器
地图属性
获取地图中心点/级别
设置地图中心点/级别
获取地图当前行政区
设置地图当前行政区
设置/获取地图显示范围
限制地图显示范围
地图的平移
交互控制
获取鼠标点击经纬度
地图的热点
设置鼠标样式
覆盖物与图层管理
覆盖物的添加与移除
图层的添加与移除
地图控件
自定义地图样式
自定义地图
设定楼块样式
标准样式主题
地图显示要素
隐藏文字标注
三维地图
3D地图
固定视角
区域掩模
坐标变换
坐标系转换
经纬度 <-> 地图容器像素坐标
经纬度 <-> 平面像素坐标
其他坐标转高德坐标
其他坐标 -> 高德坐标
其他坐标 -> 高德坐标 (批量)
事件系统
地图事件
地图加载完成事件
地图移动相关事件
地图缩放相关事件
地图点击和鼠标事件
地图拖拽相关事件
覆盖物事件
覆盖物点击和鼠标事件
覆盖物拖拽相关事件
信息窗体打开关闭事件
其他事件
DOM事件
自定义事件
图层
图层通用接口
批量修改图层
图层添加与移除
层级设定
图层透明度
高德官方图层
默认标准图层
实时路况图层
卫星图
卫星和路网
楼块图层
简易行政区图
简易行政区图+标注
简易行政区图-世界
简易行政区图-中国
简易行政区图-外国
简易行政区图-省区
图层切换
行政区拾取+修改样式
三方标准图层
卫星图+掩模
WMTS
WMS
XYZ栅格图层
函数加载栅格图
MVT图层
MVT多面体
自有数据图层
图片图层
Canvas图层
热力图
3D 热力图
自定义图层-SVG
自定义图层-GLCustomLayer 结合 THREE
自定义图层-GLCustomLayer 结合 ReGL
3D Tiles 图层
自定义图层-Canvas
Canvas作为切片
img作为切片
室内地图
叠加室内地图
默认室内图层
覆盖物
通用
根据覆盖物调整地图范围
添加一个或多个覆盖物
移除一个或多个覆盖物
清除所有覆盖物
获取某类覆盖物
获取某个覆盖物
跨日期线绘制
点标记
点标记
点标记锚点
文本标记
自定义图标
圆点标记
自定义点标记内容
设置点标注的文本标签
自适应显示多个点标记
删除多个点标记
从多个点中删除指定点
设置点的拖拽效果
轨迹回放
灵活的点标记
海量点标记
标注和标注图层
标注和标注图层-文字标注
标注和标注图层-海量点
海量点 MassMarks
点聚合
点聚合(包含权重信息)
按索引聚合
矢量图形
折线的绘制
弧线的绘制和编辑
多边形的绘制
立面体绘制
矩形的绘制和编辑
圆的绘制
椭圆的绘制和编辑
绘制矢量图形
跨日期线绘制
绘制大地线
遮罩
GeoJSON
OverlayGroup批处理矢量图形
自定义折线方向箭头
矢量覆盖物编辑
折线编辑器
多边形编辑器
多边形编辑器吸附功能
覆盖物群组
添加/移除
批量修改属性
地图控件
地图控件的添加和移除
简易缩放按钮
3D 控制罗盘
信息窗体
默认样式信息窗体
信息窗体锚点
自定义样式信息窗体
信息窗体内的事件交互
给多个点添加信息窗体
右键菜单
默认右键菜单
自定义右键菜单
覆盖物添加右键菜单
搜索服务
输入提示
获取输入提示数据
输入提示
POI搜索
获取搜索数据
关键字搜索
多关键字检索
周边搜索
多边形搜索
详情查询
输入提示后查询
根据搜索结果添加 marker
路线规划服务
驾车路线规划
位置经纬度 + 驾车规划路线
地点关键字 + 驾车路线规划
位置经纬度 + 获取驾车规划数据
规划结果 + 驾车路线绘制
可拖拽驾车路线规划
途经点
货车路线规划
步行路线规划
位置经纬度 + 步行路线规划
地点关键字 + 步行路线规划
规划结果 + 步行路线绘制
位置经纬度 + 获取步行规划数据
骑行路径规划
位置经纬度 + 骑行路线规划
地点关键字 + 骑行路线规划
位置经纬度 + 获取骑行规划数据
规划结果 + 骑行路线绘制
公交路线规划
位置经纬度 + 公交路线规划
地点关键字 + 公交路线规划
位置经纬度 + 获取公交规划数据
规划结果 + 公交路线绘制
其他LBS服务
地理编码
地理编码(地址 -> 坐标)
批量地理编码
逆地理编码(坐标 -> 地址)
批量逆地理编码
行政区划查询
下属行政区查询
行政区边界查询
轨迹纠偏
驾车轨迹纠偏
公交信息查询
公交站点查询
公交线路查询
公交到达圈
定位
IP城市定位
地图初始IP城市定位
浏览器精确定位
浏览器精确定位-定位点自定义
天气预报
天气预报
辅助接口
工具类
鼠标工具-绘制覆盖物
鼠标工具-拉框缩放
鼠标工具-距离面积测量
测距工具
辅助库
浏览器环境
颜色转换
调起高德地图
几何计算
距离/面积计算
两点间距离
点到线的距离
路径长度
区域面积
关系判断
点是否在线上
点是否在多边形内
面与面的几何关系
其他
路径是否顺时针
‹
›
交互控制
通过map.setStatus修改地图的可拖拽、可缩放等状态
源代码编辑器
复制
运行
还原
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>交互控制</title> <link rel="stylesheet" href="http://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <link rel="stylesheet" type="text/css" href="http://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css"> <style> html, body, #container { width: 100%; height: 100%; } </style> </head> <body> <div id="container"></div> <div class="info"> <h4>当前地图状态(Status)</h4> <p><span id="map-status"></span></p> </div> <script src="http://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> <script src="http://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script type="text/javascript" src="http://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js"></script> <script type="text/javascript" src="http://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"></script> <script type="text/javascript" src='http://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script> <script> var mapOpts = { showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图,PC默认true,移动端默认false dragEnable: false, // 地图是否可通过鼠标拖拽平移,默认为true keyboardEnable: false, //地图是否可通过键盘控制,默认为true doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图,默认为true zoomEnable: false, //地图是否可缩放,默认值为true rotateEnable: false, // 地图是否可旋转,3D视图默认为true,2D视图默认false } //获取并展示地图状态信息 function logMapOptions() { var node = new PrettyJSON.view.Node({ el: document.querySelector("#map-status"), data: mapOpts }); } logMapOptions(); //创建地图 var map = new AMap.Map('container', mapOpts); //通过map.setStatus方法动态设置地图状态 /** map.setStatus({ dragEnable: true, keyboardEnable: true, doubleClickZoom: true, zoomEnable: true, rotateEnable: true }); */ </script> </body> </html>
控制台
清空
示例
中心
常见
问题
智能
客服