开发 地图 JS API 1.4 教程 入门 快速上手

快速上手 最后更新时间: 2021年01月22日

按照「准备」篇完成页面准备工作之后就可以真正开始地图的开发工作了。本篇带您快速了解:地图、图层、点标记、矢量图形、信息窗体、事件的最基本使用方法。

HELLO,AMAP!

简单创建一个地图只需要一行代码,构造参数中的container为准备阶段添加的地图容器的id

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

创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性:

    var map = new AMap.Map('container', {
        zoom:11,//级别
        center: [116.397428, 39.90923],//中心点坐标
        viewMode:'3D'//使用3D视图
    });

图层

默认情况下,地图只显示标准底图,如需要叠加别的图层,可以通过map.add方法添加图层:

    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
    //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    map.add(trafficLayer);//添加图层到地图

也可以在地图初始化的时候通过layers属性为地图设置多个图层:

    var map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        zooms: [4,18],//设置地图级别范围
        zoom: 13
    });

地图 JS API 提供了标准、卫星、路网、路况、建筑等多个官方图层,同时也提供了加载第三方WMS、WMTS、XYZ等标准图层的接口,也提供了把一般的图片、Canvas、视频、热力等作为图层的能力,查看图层相关教程

点标记与矢量图形

JS API 提供了在地图之上绘制覆盖物的能力,比如点标记 Marker、文本标记 Text、圆点标记 CircleMarker。

添加点标记的方法非常简单,比如添加一个默认样式的Marker:

    var marker = new AMap.Marker({
        position:[116.39, 39.9]//位置
    })
    map.add(marker);//添加到地图

移除的方法如下:

    map.remove(marker)

查看点标记相关教程

也提供了绘制圆Circle、折线 Polyline、多边形 Polygon、椭圆 Ellipse、矩形 Rectangle、贝瑟尔曲线 BesizerCurve等矢量图形的能力,比如添加折线:

  var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeWeight: 5,        //线宽
        strokeStyle: "solid",   //线样式
    });
    map.add(polyline);

查看矢量图形关教程

事件功能与信息窗体

JS API 提供的Map、点标记、矢量图形的实例均支持事件,鼠标或者触摸操作均会触发相应的事件。我们通过给点标记绑定click事件来简单了解事件系统信息窗体的基本使用:

     var infoWindow = new AMap.InfoWindow({ //创建信息窗体
        isCustom: true,  //使用自定义窗体
        content:'<div>信息窗体</div>', //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(16, -45)
    });
    var onMarkerClick  =  function(e) {
        infoWindow.open(map, e.target.getPosition());//打开信息窗体
        //e.target就是被点击的Marker
    } 
    var marker = new AMap.Marker({
         position: [116.481181, 39.989792]
    })
    map.add(marker);
    marker.on('click',onMarkerClick);//绑定click事件



返回顶部 示例中心 常见问题 智能客服 公众号
二维码