文章目录
- 先在控制台申请创建应用,获得对应的key和密钥用来配置api
- 创建一个地图容器并获取地图对象
- 给地图加个自定义图层
- 使用地图控件
- 绑定地图事件
- 创建点标记
- 根据已知坐标点生成
- 根据点击位置生成
- 绘制多边形(以折线为例)
- 使用鼠标绘制图形
- 图形编辑器
- 两点间计算计算以及面积计算
先在控制台申请创建应用,获得对应的key和密钥用来配置api
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'申请的安全密钥',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=申请的key"></script>
//v=2.0 可以控制api的版本,根据自己情况配置版本
创建一个地图容器并获取地图对象
<body>
//地图容器
<div id="container"></div>
<script>
var map = new AMap.Map('container',{
zoom:12,//级别(缩放比例 3-20 )
center: [119,27],//中心点坐标
viewMode:'3D',//使用3D视图
// mapStyle: 'amap://styles/macaron',
// pitch:45
</script>
</body>
要注意设置一下页面样式和容器样式,才能显示地图
<style>
html,
body,
#container{
width: 100%;
height: 100%;
}
*{
margin: auto;
}
</style>
可以在创建map对象时候设置各种参数,也可以后续设置
给地图加个自定义图层
例如添加实时的路网图层,在开发文档中可以查看更多图层调用方法
//实时交通图层
var traffic = new AMap.TileLayer.Traffic({
'autoRefresh': true, //是否自动刷新,默认为false
'interval': 180, //刷新间隔,默认180s
});
map.add(traffic)//通过add方法添加图层
map.remove(traffic) //需要时可以移除
可以通过原生js绑定事件来显示这些图层,例如简单按钮实现
const flag = false;
function add(){
this.flag = !this.flag
if(this.flag===true){
map.add(traffic)
}else{
map.remove(traffic)
}
}
使用地图控件
//加载控制
//安装插件
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType','AMap.ControlBar'],function(){
//工具类-放大缩小
map.addControl(new AMap.ToolBar())
//比例尺
map.addControl(new AMap.Scale())
//鹰眼--缩略图
map.addControl(new AMap.HawkEye({isOpen:false}))
//切换地图样式
map.addControl(new AMap.MapType())
//控制圆盘 --旋转 -倾斜角度
map.addControl(new AMap.ControlBar())
})
绑定地图事件
地图事件是对 Map 底图操作后触发的事件,事件回调中返回 MapsEvent对象。该对象包含触发的对象目标、触发所在经纬度等信息。
map.on('click',function(e){
//传入e 为事件对象,对其数据进行处理
console.log(`经度:${e.lnglat.lng},纬度:${e.lnglat.lat}`)
})
创建点标记
根据已知坐标点生成
var marker = new AMap.Marker({
position: new AMap.LngLat(116.39, 39.9), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
//用数组我这里报错,不知道什么原因
title: '北京'
icon:'想用的图标的链接'
offset: new AMap.Pixel(-13,20)// 偏移量
});
map.add(marker);
根据点击位置生成
在前面地图事件的基础上
map.on('click',function(e){
// console.log(`经度:${e.lnglat.lng},纬度:${e.lnglat.lat}`)
//可以直接传参,这里为了试一下怎么用数组
let lnglat = []
lnglat[0]=e.lnglat.lng
lnglat[1]=e.lnglat.lat
var marker = new AMap.Marker({
position: new AMap.LngLat(lnglat[0],lnglat[1]),
// 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
// 原来传数组要这样传,mlgb的
});
map.add(marker);
})
绘制多边形(以折线为例)
基于经纬度定义节点
// 折线的节点坐标数组,每个元素为 AMap.LngLat 对象
var path = [
new AMap.LngLat(116.368904,39.913423),
new AMap.LngLat(116.382122,39.901176),
new AMap.LngLat(116.387271,39.912501),
new AMap.LngLat(116.398258,39.904600)
];
添加实例
// 创建折线实例
var polyline = new AMap.Polyline({
path: path,
borderWeight: 2, // 线条宽度,默认为 1
strokeColor: 'red', // 线条颜色
lineJoin: 'round' // 折线拐点连接处样式
});
// 将折线添加至地图实例
map.add(polyline);
使用鼠标绘制图形
map.plugin(["AMap.MouseTool"],function(){
var mouseTool = new AMap.MouseTool(map);
//使用鼠标工具,在地图上画标记点
// mouseTool.marker();
mouseTool.polyline()
});
图形编辑器
// 引入多边形编辑器插件
map.plugin(["AMap.PolylineEditor"],function(){
// 实例化多边形编辑器,传入地图实例和要进行编辑的多边形实例
polylineEditor = new AMap.PolylineEditor(map, polyline);
// 开启编辑模式
polylineEditor.open();
});
两点间计算计算以及面积计算
<script>
// console.log(AMap)
var map = new AMap.Map('container',{
zoom:12,//级别(缩放比例 3-20 )
center: [116.39, 39.9],//中心点坐标
viewMode:'2D',//使用3D视图
// mapStyle: 'amap://styles/macaron',
// pitch:45
})
//1.创建两个点(设置可拖动)
var m1 = new AMap.Marker({
map: map, //将点m1添加到map地图中
draggable: true, //可拖拽
title:'p1',
position: new AMap.LngLat(116,39.99)
})
var m2 = new AMap.Marker({
map: map, //将点m1添加到map地图中
draggable: true, //可拖拽
title:'p2',
position: new AMap.LngLat(116.13,39.99)
})
var m3 = new AMap.Marker({
map: map, //将点m1添加到map地图中
draggable: true, //可拖拽
title:'p3',
position: new AMap.LngLat(116.2,39.59)
})
//让地图根据覆盖物调整显示区域
map.setFitView()
//2.创建一条线
var line = new AMap.Polyline({
strokeColor:'#4f3d7d', //描边颜色
isOutline:true, //是否轮廓线
outerlineColor:'white',//轮廓颜色
})
line.setMap(map)
//3.准备文本
var text = new AMap.Text({
text:'it is a text',
style: {
'backgroud-color' : '#eeecf3',
'boder-color':'#09070e',
'font-size': '16px',
}
})
text.setMap(map)
//多边形
var polygon = new AMap.Polygon({
path:[m1.getPosition(),m2.getPosition(),m3.getPosition()],
fillColor:'#fff', // 多边形填充颜色
borderWeight:2,// 线条宽度,默认为 1
strokeColor:'red'// 线条颜色
})
map.add(polygon)
//4.计算
function compute(){
//得到m1和m2的经纬度
var p1 = m1.getPosition()
var p2 = m2.getPosition()
var p3 = m3.getPosition()
//将text文本显示在三个经纬度中间,经纬度的计算要用这种形式
var textPos = p1.divideBy(3).add(p2.divideBy(3)).add(p3.divideBy(3))// (p1+p2+p3)/3
// 计算两点间距离
// var distance = Math.round(p1.distance(p2))
var dis = AMap.GeometryUtil.distance(p1, p2)
// 根据起始点和终点绘制线段
var path = [p1,p2]
line.setPath(path)
polygon.setPath([p1,p2,p3])
// 计算面积
// 返回点 p0-p1-p2 围成的闭合区域面积,单位:平方米
var area = AMap.GeometryUtil.ringArea([p1,p2,p3]);
// console.log(area)
text.setText('距离为:'+ dis + '米'+'\n面积为:'+area+'平方米')
text.setPosition(textPos)
}
compute()
// 绑定坐标点拖曳事件
m1.on('dragging',compute)
m2.on('dragging',compute)
m3.on('dragging',compute)
</script>