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

张张-程序猿

已于 2023-04-23 16:12:03 修改

阅读量2.3k

点赞数 1

分类专栏：高德地图文章标签： javascript 前端 html

于 2023-04-23 16:08:47 首次发布

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

版权

高德地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

// 说明: 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 //填充透明度
    });
    polygon.setPath(pathArray);
    map.add(polygon)
})

效果图
在这里插入图片描述
第二种,就是高亮某个区域，或者乡，或者镇，或者其他。首先我们要先拿到要高亮区域的JSON文件，提供一个工具阿里云-数据可视化平台
说明: 可以通过边界生成器，左侧线来绘制高亮的区域，最后导出JSON文件。
在这里插入图片描述
导出的JSON文件放到项目中，提供一下获取本地JSON文件的方法

var data = $.parseJSON($.ajax({
	url: "tangshan.json", //json文件位置，文件名
	dataType: "json", //返回数据格式为json
	async: false
}).responseText);

拿到JSON数据实现高亮

var polygon = new AMap.Polygon({
	map: map,
	path: data, //设置多边形边界路径
	strokeColor: "#1791fc", //线颜色
	strokeOpacity: 1, //线透明度
	strokeWeight: 3, //线宽
	fillColor: "#1791fc", //填充色
	fillOpacity: 0.05 //填充透明度
});

效果图
在这里插入图片描述
4.2 自定义点标记内容。
可参考高德自定义图标自定义图标

markers.push({
	label: "文本内容", // 文本内容
	icon:{ // 图标
		size: new AMap.Size(28, 28), // 图片尺寸
		image: 'listIcon1.png', // 图片地址
		imageSize: new AMap.Size(28, 28), // 图标所用图片大小
	},
	position:[119.02, 32.04] // 经纬度坐标
})
markers.forEach(function(marker) {
	var Amarker = new AMap.Marker({
		map: map,
		icon: new AMap.Icon(marker.icon), 
		position: marker.position,
	});
	Amarker.setLabel({ //显示文本
		offset: new AMap.Pixel(-35, 20), //设置文本标注偏移量
		content:"<span>"+ marker.label + "</span>", //设置文本标注内容
		direction: 'right',  //设置文本标注方位
	})
});

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

4.3 点聚合
可参考高德点聚合点聚合

var _renderClusterMarker; // 点聚合样式
var _renderMarker; // 展开后每个点样式
// 需要聚合的点数据坐标-示例

var points = [
	 {lnglat: [119.08928916967723, 32.00269565830832] },
	 {lnglat: [119.0830401702379, 32.00287665657872] },
	 {lnglat: [119.0840401702379, 32.00267665657872] },
	 {lnglat: [119.0920401702379, 32.00257665657872] },
	 {lnglat: [119.0910401702379, 32.00247665657872] },
	 {lnglat: [119.18928916967723, 32.00269565830832] },
	 {lnglat: [119.1830401702379, 32.00287665657872] },
	 {lnglat: [119.1840401702379, 32.00267665657872] },
	 {lnglat: [119.1920401702379, 32.00257665657872] },
	 {lnglat: [119.1910401702379, 32.00247665657872] },
];
// 声明一个空数组，{重新组装聚合的点数据坐标，展开后点坐标，文本}
var LabelsData = []
for (var i = 0; i < points.length; i ++) {
	LabelsData.push({
		label: '文本内容', //	文本内容
		icon: {   // 图标
			image: 'listIcon1.png', // 图片地址
			imageSize: [20, 20], // 图片大小
		},
		id: i, // 每个点的id
		lnglat: points[i].lnglat  // 经纬度坐标
	})
}
// 绘制聚合展开后每个点的绘制样式
_renderMarker = function(context) {
	console.log(context)
	var content = "<span style='color:#FF820C'>" + context.data[0].label + "</span>"
	var offset = new AMap.Pixel(-9, -9);
	var icon = context.data[0].icon
	context.marker.setIcon(new AMap.Icon(icon))
	context.marker.setLabel({
		content: "<span style='color:#FF820C'>" + context.data[0].label + "</span>"
	})
	context.marker.setOffset(offset)
	context.marker.on('click', (e) => {  // 点击事件
		vue.getDetail(context.data[0].id)
	})
}
// 获取所有点数组长度，绘制聚合点样式
var count = LabelsData.length
_renderClusterMarker = function(context) { // 绘制聚合点样式
	var factor = Math.pow(context.count / count, 1 / 18);
	var div = document.createElement('div');
	var Hue = 9 - factor * 180;
	var bgColor = 'hsla(' + Hue + ',100%,50%,0.4)';
	var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
	var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
	var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
	div.style.backgroundColor = bgColor;
	var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
	div.style.width = div.style.height = size + 'px';
	div.style.border = 'solid 1px ' + borderColor;
	div.style.borderRadius = size / 2 + 'px';
	div.style.boxShadow = '0 0 1px ' + shadowColor;
	div.innerHTML = context.count;
	div.style.lineHeight = size + 'px';
	div.style.color = fontColor;
	div.style.fontSize = '10px';
	div.style.textAlign = 'center';
	div.style.zIndex = "-1"
	div.style.color = "#1275FF"
	context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
	context.marker.setContent(div)
};
// 添加聚合组件
map.plugin(["AMap.MarkerClusterer"], function() {
	cluster = new AMap.MarkerClusterer(map, LabelsData, {  //实例化 AMap.MarkerClusterer
		gridSize: 80, // 设置网格像素大小
		renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
		renderMarker: _renderMarker,  // 自定义非聚合点样式
	});
})

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

4.4 结合微信js-sdk点击跳转当前位置

wx.getLocation({
	isHighAccuracy: true, // 结合gcj82 提高位置精确度
	type:'gj02'，// 默认为wgs84的 s 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入”gcj02
	complete: (res) => {
	this.map.setZoomAndCenter(20, [经度,纬度]);
	}
})

效果图
在这里插入图片描述
4.5 根据层级缩放显示不同层级的内容

var LabelsData = []
LabelsData.push({
	label: list[i].place name, //文本内容
	icon: { // 图标
		image: list[i].icon map, // 图片地址
		imagesize: [28,20], // 图片大小
	}
	id: list[i].id,// 每个点的id
	Inglat: list[i].location // 经纬度业标
})

 /**
* 地图缩放
* 划分层级，根据不同层级显示所要展示的内容
*/
map.on('zoomchange", () => {
	var zoom = map.getZoom(); // 缩放过程中层级
	// 业务逻辑处理
})
map.on('zoomend', () => {
	// 业务逻辑处理
})

效果图
在这里插入图片描述
4.6 移动位置获中心点取经结度
主要通过微信wx.getLocation获取当前位置，以当前位置为中心点，移动地图更新中心点位置，获取到中心点位置做业务处理。

wx.getLocation({
	isHighAccuracy: true, //结合gcje2提高定位精度
	type:'gcj02', // 默认为wgs84的 ps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
	complete: (res) => {
		res.latitude; // 纬度，浮点数，范围为9 ~ -98
		res.longitude; // 经度，浮点数，范围为18 ~ -188。
		var speed = res.speed; // 速度，以米/每秒计
		var accuracy = res.accuracy; // 位置精度
	}
})
// 中心点位置等于当前点的位置
//初始化地图对象，加载地图
var map = new AMap.Map('container', {
	center:[res.longitude,res.latitude], // 以当前坐标为中心点位置
	zoom: 28, // 进入地图所在层级
	zooms: [18, 28]// 地图缩放层级范围
})
map.on('moveend', (e) => { // 移动地图时间，实时更新中心点位置
	map.getCenter() // 实时获取中心点位置
})

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

4.7 回放轨迹

// 首先拿到回访轨迹的JSON文件，绘制出回放轨迹路线，路线的样式的一些设置，最后点击触发回放事件。
AMap.plugin('Amap.MoveAnimation', function() {
	var marker // 移动物图标
	var lineArr = jsonData; // 获取本地json文件
	marker = new AMap.Marker({ // 回放移动物图标
		map: map,
		position: [118.87044801, 31.94109066], //图标起始位置
		offset: new AMap.Pixel(-13, -26), //偏移量
	});
})
// 绘制轨迹
var polyline = new AMap.Polyline({
	map: map,
	path: lineArr, //回放轨迹json数据
	strokeColor: "#28F", // 线颜色
	strokeOpacity: 0.5, // 线透明度
	strokeWeight: 6 ,// 线宽
	strokeStyle: 'solid' // 线样式
});
var passdPolyline = new Amap.Polyline({
	map: map,
	strokeColor: '#Af5', // 线颜色
	strokeWeight: 6, // 线宽
})
window.startAnimation = function startAnimation() {
	marker.moveAlong(lineArr, {
		// 每一段的时长
		duration: 1000, // 可根据实际菜鸡时间间隔设置
		// JSAPI2.0 是否延道路自动设置角度在moveAlong里设置
		autoRotation: true,
		circlable: false // 循环动画
	})
}
map.setFitView(); // 添加覆盖物