- 概述
针对公司项目用到的高德地图播件,及用到的方法(缩放层级显示不同层级点、默认点显示、点聚合、定位当前点位置、位置选择获取经纬度)。 - 通用文件
// 说明: 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(); // 添加覆盖物
效果图