您现在的位置: 开发 > 地图 JS API > 开发指南 > 在地图上绘制 > 简介 >

高德 开发 地图 JS API 开发指南 在地图上绘制 简介

更新时间:2017年05月23日

亲手试一试

除了Map类之外,JSAPI提供了丰富的类库以满足开发者的各种开发需求,这些类库涵盖:覆盖物、图层等,各个类库的简介如下

一、覆盖物

最常用的地图覆盖物是Marker和信息窗体,除此之外,我们提供了圆Circle、多边形Polygon、折线Polyline、右键菜单ContextMenu等。除信息窗体和右键菜单之外,这些覆盖物都可以使用setMap方法添加到地图或者从地图上移除,使用setMap()可以将覆盖物从地图中移除;信息窗体和右键菜单使用open方法显示在地图上:

var marker = new AMap.Marker({
    position: [116.480983, 39.989628]
});
marker.setMap(map);
var circle = new AMap.Circle({
    center: [116.480983, 39.989628],
    radius: 100,
    fillOpacity:0.2,
    strokeWeight:1
})
circle.setMap(map);
map.setFitView()
var info = new AMap.InfoWindow({
    content:"信息窗体<br>这里是方恒科技大厦",
    offset:new AMap.Pixel(0,-28)
})
info.open(map,marker.getPosition())

名称

类名

简介

点标记

Marker

用来在地图上添加点状标记,可指定任意icon或者content

信息窗体

InfoWindow

用来展示比较详细或者复杂的内容,同一事件只能展示一个

Circle

以某一中心和半径(m)在地图上绘制圆

多边形

Polygon

通过路径path在地图上绘制多边形,支持填充、描边以及多环多边形

折线

Polyline

通过路径在地图上绘制折线,支持描边以及虚线

右键菜单

ContextMenu

封装地图的右键菜单,鼠标右键单击时弹出

二、图层

除了默认的图层之外,API提供了路况Traffic、卫星Satellite、路网RoadNet、3D楼块Buildings等图层类,使用多图层的时候有两种方式, 第一种方式,在地图初始化的时候将需要的图层设定到layers属性中:

var defaultLayer = new AMap.TileLayer();
var traffic = new AMap.TileLayer.Traffic();
var map = new AMap.Map('container',{
    zoom: 10,
    layers: [
        defaultLayer,//默认图层
        traffic//实时交通图层
    ],
    center: [116.39,39.9]
});

第二种方式,在地图初始化之后,通过调用setMap(map)将图层添加到地图上,不需要的时候可以使用setMap()来移除某个图层:

var defaultLayer = new AMap.TileLayer();
var traffic = new AMap.TileLayer.Traffic();
var map = new AMap.Map('container',{
    zoom: 10,
    center: [116.39,39.9]
});
traffic.setMap(map);

名称

类名

简介

默认图层

TileLayer

默认样式的图层,不使用layers属性的时候无需设置

实时交通

TileLayer.Traffic

用来展示实时路况,可设定刷新频率等

卫星

TileLayer.Satellite

用来展示卫星影像图层

路网

TileLayer.RoadNet

用来展示交通网络,通常与卫星图层叠加使用

3D楼块

Buildings

展示三维效果的建筑物楼块

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