高德地图属性

容器   

 var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });

圆形图

      var circle = new AMap.Circle({
        center: new AMap.LngLat(113.305315, 22.842663),  // 圆心位置
        radius: 1000, // 圆半径
        fillColor: '#1791fc',   // 圆形填充颜色
        strokeColor: '#fff', // 描边颜色
        strokeWeight: 2, // 描边宽度
        fillOpacity: 0.4,
        strokeStyle: 'dashed',//描边样式
      });

      map.add(circle);

折线

//设置连接线样式
    		var polyline = new AMap.Polyline({
        		path: line,          //设置线覆盖物路径
        		strokeColor: "#FF0000", //线颜色
        		strokeOpacity: 0.8,       //线透明度
        		strokeWeight: 1,        //线宽
        		strokeStyle: "dashed",   //线样式
        		strokeDasharray: [10, 10] //补充线样式
    		});

事件功能与信息窗体

map.clearMap(); // 使用clearMap方法删除所有覆盖物

map.clearInfoWindow()  关闭窗体信息

地图初始化加载定位到当前城市

创建AMap.Map对象时如果没有传入center参数，您会发现地图将自动定位到您所在城市并显示，这就是JS API的初始加载定位：无需传入对应参数就能获取大致的定位信息。以下代码运行后将显示您所在城市的地图：

var map = new AMap.Map('container', {
  resizeEnable: true
})

插件引入

异步加载指的是在 JS API 加载完成之后，在需要使用到某个插件的时候，通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 
<script type="text/javascript" >
    var map = new AMap.Map('container',{
        zoom:12,
        center:[116.39,39.9]
    });
    AMap.plugin('AMap.ToolBar',function(){//异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    });
</script>

异步与同步加载插件、插件列表

https://lbs.amap.com/api/javascript-api/guide/abc/plugins

地图组成与名词解释

https://lbs.amap.com/api/javascript-api/guide/abc/components

基础类

https://lbs.amap.com/api/javascript-api/guide/abc/basetype

1、JS API 支持的经纬度的写法有两种，使用时经度在前，纬度在后，推荐使用标准写法：

创建路径

  var path = [new AMap.LngLat(116,39), new AMap.LngLat(116,40), new AMap.LngLat(117,39)] //标准写法

  var path = [ [116,39], [116,40], [117,39] ]; //简写

  var polyline = new AMap.Polyline({
      path : path,
  })
  map.add(polyline);

2、使用经纬度类型可以进行一些简单的位置计算，比如点与点、点与线的距离，根据距离差计算另一个经纬度等：

var lnglat1 = new AMap.LngLat(116, 39);
var lnglat2 = new AMap.LngLat(117, 39);
var distance = lnglat1.distance(lnglat2);//计算lnglat1到lnglat2之间的实际距离(m)

var lnglat3 = lnglat1.offset(100,50)//lnglat1向东100m，向北50m的位置的经纬度

创建多个地图对象

创建多个地图只需加载一次JS API。通过增加多个HTML容器，可创建多个地图对象。

<div id="containerOne" style="width:500px; height:300px"></div>
<div id="containerTwo" style="width:500px; height:300px"></div>


// 创建多个地图对象
var mapOne = new AMap.Map('containerOne');
var mapTwo = new AMap.Map('containerTwo');

地图生命周期

1.创建地图对象
2.地图加载完成
3.销毁地图对象

创建地图对象后，开始加载地图资源，地图加载完成后触发complete事件。

map.on('complete', function(){
    // 地图图块加载完成后触发
});

销毁地图对象

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

一次性添加多个点标记

      var marker1 = new AMap.Marker({
        position: [113.3, 22.835]//位置
      })
      var marker2 = new AMap.Marker({
        position: [113.292299, 22.825102]//顺峰山公园
      })

      var marker3 = new AMap.Marker({
        position: [113.279629, 22.825571]//罗定邦中学
      })

      var markerList = [marker1, marker2, marker3];

      map.add(markerList);

marker.setMap(map);

高德地图的Marker不需要setMap，创建时默认就可以显示在地图上

地图控件

地图图面控件包括工具条、比例尺、定位、鹰眼、基本图层切换五种插件。
https://lbs.amap.com/api/javascript-api/guide/overlays/toolbar

DOM和自定义事件

https://lbs.amap.com/api/javascript-api/guide/events/dom_trigger

<button id="btn">Click Me!</button>

var btn = document.getElementById("btn")
// 绑定事件
var listener = AMap.event.addDomListener(btn, "click", function(ev) {
  // DOM 被点击时触发，ev 为原生事件
}); 
// 解绑事件
AMap.event.removeListener(listener);

自定义绑定事件

对于一些特殊情况（解耦代码等），我们需要自定义事件。我们可以使用 AMap.event.addEventListener或地图对象的 on方法进行事件绑定，使用 AMap.event.tigger方法或者地图对象 emit方法进行事件的派发。