这是官方文档 https://lbs.amap.com/api/javascript-api/guide/abc/prepare

首先我们需要注册为开发者申请相应的密钥，这边是web端的。

然后在页面端创建一个容器，装载地图插件。

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

引入JS组件

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=填入你申请的密钥"></script>

往容器中创建map地图,支持添加各种初始化参数

map = new AMap.Map('container', {
      zoom:17,//缩放级别 最高为18
      pitch:75, // 开启 3D视图模式下 地图俯仰角度，有效范围 0 度- 83 度
      viewMode:'3D',//使用3D视图
      center: [146.2452328205,29.6929091290],//中心点坐标
});

加入实时路况显示层

//实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({
  zIndex: 10
});
//添加图层到地图
map.add(trafficLayer);

同时引入工具条插件

AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation', ], function() {
    // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
    map.addControl(new AMap.ToolBar());
    // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
    map.addControl(new AMap.Scale());
    // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
    map.addControl(new AMap.OverView({
        isOpen: true
    }));
    // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    map.addControl(new AMap.MapType());
    // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
    map.addControl(new AMap.Geolocation());
});

地图加载完毕执行额外逻辑

map.on('complete', function() {
    //更新覆盖物显示
    updateCover();
    setInterval(function() {
        updateCover();
    }, 5000);
    //执行其他额外逻辑
});

监听地图点击事件

map.on('click', function(ev) {
    console.log(ev);
    // 触发事件的对象
    var target = ev.target;
    // 触发事件的地理坐标，AMap.LngLat 类型
    var lnglat = ev.lnglat;
    // 触发事件的像素坐标，AMap.Pixel 类型
    var pixel = ev.pixel;
    // 触发事件类型
    var type = ev.type;
    console.log(target);
    console.log(lnglat);
    console.log(pixel);
    console.log(type);
});

销毁地图

// 销毁地图，并清空地图容器
map.destroy( );

传入经纬度，设置地图中心点

// 标准写法
var position = new AMap.LngLat(116, 39);
// 简写 var position = [116, 39]; 
map.setCenter(position);

动态设置地图风格,支持自定义

<div>
    <select name="style" lay-filter="style">
        <option value="">选择地图风格</option>
        <option value="normal">标准</option>
        <option value="macaron">马卡龙风格</option>
        <option value="graffiti">涂鸦风格</option>
        <option value="whitesmoke">远山黛</option>
        <option value="dark">幻影黑</option>
        <option value="fresh">草青色</option>
        <option value="darkblue">极夜蓝</option>
        <option value="blue">靛青蓝</option>
        <option value="light">月光银</option>
        <option value="grey">雅士灰</option>
    </select>
</div>

form.on('select(style)', function(data) {
    if (data.value != "") {
        map.setMapStyle('amap://styles/' + data.value);
    }
});

自定义地图请看 https://lbs.amap.com/api/javascript-api/guide/map/map-style

添加覆盖物

var marker = new AMap.Marker({
  position: new AMap.LngLat(res.data[i].lng,res.data[i].lat),
  offset: new AMap.Pixel(-10, -10),
  icon: '覆盖物图标 建议46*46以内', // 添加 Icon 图标 URL
  title: '鼠标滑动时显示的内容',
  其他额外参数,会一起合并到对象中 通过  e.target.B.xxx获取
});
map.add(marker);

删除覆盖物

map.remove(marker);

设置覆盖物属性

透明度属性 opcatiy   0-1

点击覆盖物事件回调

marker.on('click', function(e) {
    console.log(e);
    var content = ["<div><img src=\"你的头像\"> ", "<div style=\"padding:0px 0px 4px;\"><b>{0}(UID:{1})</b>".format(e.target.B.title, e.target.B.rid), "近期在线 : " + e.target.B.lasttime, "最近接单 : " + e.target.B.last_take_time, "待完成单 : " + e.target.B.take_orders + '个', "总接单数 : " + e.target.B.total_take_orders + '个', "</div></div>"];
    //显示信息窗体	
    var infoWindow = new AMap.InfoWindow({
        content: content.join("
"),
    });
    // console.log(map.getCenter());		
    infoWindow.open(map, e.lnglat);
});

使用注意

① 高德地图 Uncaught Invalid Object: Pixel(NaN, NaN)

显示坐标点时，对经纬度的值做判断后再通过高德api作标记操作。