高德地图js-api简单使用_js 高德静态地图api怎么展示-CSDN博客

本文链接：https://blog.csdn.net/zibuyu369/article/details/126249695

文章目录

先在控制台申请创建应用，获得对应的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>