【高德地图API】JS高德地图API实现，高德地图2D/3D切换，高德API缩放加减号，高德API构造点标自定义点标，通过位置获取经纬度，经纬度获取位置，搜索标点，高德API绘画围栏等等

慕云枫

已于 2024-10-22 17:51:05 修改

阅读量2.1k

点赞数 1

分类专栏：地图API 前端公众号文章标签： javascript 3d 前端 html5 高德地图API

于 2023-05-16 17:08:42 首次发布

本文链接：https://blog.csdn.net/weixin_43992507/article/details/130701381

版权

前端同时被 3 个专栏收录

94 篇文章

订阅专栏

公众号

9 篇文章

订阅专栏

地图API

5 篇文章

订阅专栏

高德地图API实现

前言

使用JS简单实现高德地图渲染和组件功能。

效果图

在这里插入图片描述

实现

API注册

密钥获取

百度搜索相关教程：高德地图API注册/密钥获取
或
前往官网API文档教程注册并获取密钥：https://lbs.amap.com/api/webservice/gettingstarted

教程

官方API：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

引入JS

key=注册的密钥

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3a8**************608a62"></script>

地图容器：宽高度必须设置，高度不可使用%百分百比，建议固定或js赋值

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

基础渲染-初始化地图

这样就可以看到基础效果了

	var map = new AMap.Map('container', {
        pitch: 60, // 倾斜角度
        //rotation: -15, // 旋转角度
        viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom: 18, // 初始化地图层级，地图默认缩放大小
        buildingAnimation:true, // 建筑出现的动画
        zoomEnable:true, // 地图是否可缩放，默认值为 true
        //doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认 true
        //dragEnable: false, // 地图拖拽移动移动，默认 true
        //scrollWheel: false,   // 关闭缩放，默认 true
        //mapStyle: 'amap://styles/whitesmoke', // 设置地图的显示样式 https://lbs.amap.com/api/javascript-api/guide/map/map-style
        center: [114.085947, 22.547] // 初始化地图中心点
    });
    // 重新设置中心点
    //map.setCenter([114.085947, 22.547]);

组件/插件引入

引入方式分为两种
第一种
在script路径后面拼接plugin参数，需要的组件逗号隔开

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3a8**************608a62&plugin=AMap.ControlBar,AMap.ToolBar"></script>

js中使用

	map.addControl(new AMap.ControlBar({
	    showZoomBar: true,// 调整zoom
	}));

第二种
script直接引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3a8**************608a62"></script>

js中使用

	// 说明：AMap.plugin 等于 map.plugin
	AMap.plugin('AMap.ControlBar', function() {
	    map.addControl(new AMap.ControlBar({
	        showZoomBar: true,// 调整zoom
	    }));
	});

本人使用的是第二种

2D和3D切换

就是地图上右上角那个指南针一样的东西

	AMap.plugin('AMap.ControlBar', function() {
	   map.addControl(new AMap.ControlBar({
	        showZoomBar: true,// 调整zoom
	        showControlButton: true,// 是否有倾斜旋转角度的功能，默认是true
	        position: {
	            right: "10px",
	            top: "15px"
	        },// 调整控件位置
	    }));
	});

缩放加减号

右上角的加减号，放大放小的

	map.addControl(new AMap.ToolBar({
        liteStyle: true,// 简易缩放模式，默认为 false
        position: {
            right: "40px",
            top: "120px"
        },// 调整控件位置
    }));

构造点标多点标、自定义点标

使用官方默认

 	var marker = new AMap.Marker({
        //content: content,  // 自定义点标记覆盖物内容
        position: [114.055639, 22.533181], // 坐标
        offset: new AMap.Pixel(0, -20) ,// 相对于基点的偏移位置
        //draggable: true, // 设置是否可以拖拽
        //cursor: 'move', // 鼠标状态
        //raiseOnDrag: true // 设置拖拽效果
    });
    // 拖到标点返回最新坐标
    marker.on('dragend', function(e) {
        console.log('坐标', marker.getPosition())
    });
    // 添加点击事件，可以点击后展示详细信息
    marker.on('click', function(e) {
        console.log("这个标点被点击了", e.target)
    })
    // 将点标记添加到地图map上
    map.add(marker);
    
    // [点标上面显示内容信息]
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});// 地图位置对象
    var content = "<div>我是弹出内容</div>"; // 要显示的内容

    // 点击弹出内容
    // marker.content = content;
    // marker.on('click', markerClick);
    // function markerClick(e) {
    //     infoWindow.setContent(e.target.content);
    //     infoWindow.open(map, e.target.getPosition());
    // }

    // 直接显示内容
    infoWindow.setContent(content);
    infoWindow.open(map, position);
    
    // 移除已创建的 marker
	//map.remove(marker);
	
	// 多个点标实例组成的数组
	//var markerList = [marker1, marker2, marker3];
	//map.add(markerList);

自定义图标

	// 首先创建 AMap.Icon 实例：
    var icon = new AMap.Icon({
        //size: new AMap.Size(40, 60), // 图标尺寸
        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',// Icon路径
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(40, 60), // 根据所设置的大小拉伸或压缩图片
    });
    // 将 Icon 实例添加到 marker 上
    var marker = new AMap.Marker({position: [114.055639, 22.533181],// icon在地图上显示的位置，数组内对应经纬度
        offset: new AMap.Pixel(-18, -56),//设置icon在地上的偏移量
        icon: icon, // 添加 Icon 实例
        zoom: 13, // 缩放等级
    });
    // 将点标记添加到地图上
    map.add(marker);

点击地图设置点标

    // 点击地图设置点标
    var marker;
    map.on('click',function(e){
        //map.clearInfoWindow();
        console.log("点击了地图", e);
        // 移除已创建的 marker
        if(marker){
            map.remove(marker);
        }
        var lnglat = e.lnglat;
        // 【构造点标记】
        marker = new AMap.Marker({
            position: [lnglat.lng, lnglat.lat], // 坐标
            offset: new AMap.Pixel(0, -20) ,// 相对于基点的偏移位置
        });
        // 将点标记添加到地图map上
        map.add(marker);
    });

通过位置信息获取经纬度坐标

	AMap.plugin('AMap.Geocoder', function() {
        var geocoder = new AMap.Geocoder({
            city: '全国'// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        })
        geocoder.getLocation('深圳市福田区平安国际金融中心大厦', function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // result中对应详细地理坐标信息
                console.log("位置获取坐标：", result)
            }
        })
    })

通过经纬度坐标获取位置信息

    AMap.plugin('AMap.Geocoder', function() {
        var geocoder = new AMap.Geocoder({
            city: '全国'// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        })
        var lnglat = [114.055639, 22.533181]
        geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // result为对应的地理位置详细信息
                console.log("坐标获取位置：", result)
            }
        })
    })

绘画圆形图、判断是否在圆的范围内

一般可以用于考勤范围、安全范围等

    // 圆形围栏绘画
    var circle = new AMap.Circle({
        center: [114.055639, 22.533181],  // 圆心位置，设置的圆形经纬度
        radius: 100, // 圆半径，单位:米
        fillColor: '#a4d5ff',   // 圆形填充颜色
        strokeColor: '#59b0fb', // 描边颜色
        strokeWeight: 2, // 描边宽度
    });
    //circle.setMap(map);
    map.add(circle);
    // 缩放地图到合适的视野级别
    map.setFitView([circle]);
    // 需要使用延迟，不然会全部判断都是false
    setTimeout(function () {
        var contains1 = circle.contains([114.055006, 22.533964]); // 用户位置的经纬度
        console.log("是否在范围内1：", contains1);
        var contains2 = circle.contains([114.055639, 22.533181]); // 用户位置的经纬度
        console.log("是否在范围内2：", contains2);
    }, 1000)

关键字搜索

默认点标

<div id="panel" style="position: fixed;right: 15px;top: 10px;"></div>

	AMap.plugin(["AMap.PlaceSearch"], function () {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "全国", // 兴趣点城市
            //citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //关键字查询，设置成输入框input就好了
        placeSearch.search('深圳市福田区平安国际金融中心大厦');
    });

替换点标

	// 构造地点查询类
	var placeSearch = new AMap.PlaceSearch({
	    city: "全国", // 兴趣点城市
	});
	// 关键字查询，设置成输入框input就好了，下面返回的集合中有name，可以自己重新查询结果选择
	placeSearch.search('深圳市福田区平安国际金融中心大厦', function (status, result) {
	    // 查询成功时，result即对应匹配的POI信息
	    console.log("搜索结果坐标：", result)
	    var pois = result.poiList.pois;
	    for(var i = 0; i < pois.length; i++){
	        var poi = pois[i];
	        var marker = [];
	        marker[i] = new AMap.Marker({
	            position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
	            offset: new AMap.Pixel(0, -20),// 相对于基点的偏移位置
	            title: poi.name
	        });
	        // 将创建的点标记添加到已有的地图实例：
	        map.add(marker[i]);
	    }
	    map.setFitView();
	})