容器
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方法进行事件的派发。