高德地图插件使用汇总（干货-从注册到熟练使用）-CSDN博客

本文链接：https://blog.csdn.net/weixin_52168983/article/details/130245963

概述
针对公司项目用到的高德地图播件，及用到的方法(缩放层级显示不同层级点、默认点显示、点聚合、定位当前点位置、位置选择获取经纬度)。
通用文件

// 说明: JSON文件示例
[
	[
		118 94655964,
		32.08543618
	],
	[
		118.94655964,
		32 08521652
	],
]

基础使用流程(显示出地图)
3.1 引入高德地图js，key值，高德地图api申请

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.7&key=key"></script>

3.2 在HTML页面创建一个容器div，设置容器的宽高

<div id="container"></div>
<style>
	#container {
   
		width: 800px;
		height: 500px;
	}
	.amap-copyright, .amap-logo {
   
		display: none !important; // 隐藏左下角图标文字
	}
</style>

3.3 声明变量map,在new AMap.Map里面设置地图初始化层级及样式。

var map = new AMap.Map('container', {
   
	resizeEnable: true,
	zoom: 11.2, //缩放级别
	center: [119.02, 32.04], //中心点
	showLabel: true, //是否展示地图文字和 POI 信息。
	zooms: [11.2, 20], // 缩放层级范围
	showLabel: true,//是否展示地图文字和 POI 信息
	// mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
})

效果图
在这里插入图片描述

方法总结

4.1: 高亮区域 (分两种情况),首先引入遮罩。

<script>
    window._AMapSecurityConfig = {
   
        securityJsCode: "密钥" ,// 开发环境使用
    }
</script>
// &plugin=AMap.DistrictSearch 高亮省份，市区使用。
<script src="https://webapi.amap.com/maps?v=2.0&key=key&plugin=AMap.DistrictSearch"></script>

第一种，高亮省、市、区。

new AMap.DistrictSearch({
   
 	extensions: 'all',
    subdistrict: 0
}).search('江宁', function (status, result) {
    // 高亮南京，输入南京就可以。
    // 外多边形坐标数组和内多边形坐标数组
    var outer = [
        new AMap.LngLat(-360, 90, true),
        new AMap.LngLat(-360, -90, true),
        new AMap.LngLat(360, -90, true),
        new AMap.LngLat(360, 90, true),
    ];
    var holes = result.districtList[0].boundaries

    var pathArray = [
        outer
    ];
    pathArray.push.apply(pathArray, holes)
    var polygon = new AMap.Polygon({
   
        pathL: pathArray, //设置多边形边界路径
        strokeColor: 'red', //线额色
        strokeWeight: 1, //线宽
        fillColor: '#000', //填充色
        // fillOpacity: 0.5 //填充透明度
    })