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

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

// 说明: 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].boundariesvar 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", //返回数据格式为jsonasync: 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, // 每个点的idlnglat: 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].iconcontext.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.MarkerClusterergridSize: 80, // 设置网格像素大小renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式renderMarker: _renderMarker,  // 自定义非聚合点样式});
})

效果图1

效果图二

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

wx.getLocation({isHighAccuracy: true, // 结合gcj82 提高位置精确度type:'gj02'，// 默认为wgs84的 s 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入”gcj02complete: (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,// 每个点的idInglat: 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 ~ -98res.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(); // 添加覆盖物

效果图

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

flutter引入高德地图_玩玩Flutter Web —— 实现高德地图插件
Red Deer 1.啰嗦几句去年写了一个功能简单的高德地图插件给flutter_deer使用,当时支持了Android与iOS两端.前一阵子有一个issue问是否会支持Flutter Web,当时 ...
67-Flutter中高德地图插件的使用
1.注册和建立高德API应用高德网站:https://lbs.amap.com/ 控制台-应用管理-创建应用在创建 Key 2.获得SHA1 进入Flutter项目中的android文件夹内,打开 ...
Antv/L7中使用高德地图插件
L7可以使用高德地图作为底图,也可以使用高德地图提供的插件,如工具栏,缩放条等. 官方文档中的引入方式如下 const sc = new Scene({id: 'xxxx-map',logoVisib ...
高德地图插件的简单使用
1:首先是资源高德开放平台 | 高德地图API (amap.com) 点进去后>点击控制台登录 2:点击开发支持会有详细的入门这里就不一一解释了 3:工具坐标拾取器:可以帮你解决不知道地图的 ...
64.qt quick-qml使用高德地图插件实现V2版本(新增:位置搜索、路径规划、轨迹编辑等)
在61.章节里我们学习了如何实现一个map插件.所以本章来扩展内容.实现轨迹编辑等 bilibili视频预览: bilibili链接 (之前的老版本,后面优化增加谷歌卫星了) 1.效果图展示使用公 ...
flutter引入高德地图_Flutter引入高德地图插件黑屏/白屏
|:-| totem 1.黑屏缺少相关的"地图资源assert" 2.白屏无网络举例说明 1.黑屏 buildTypes 配置: buildTypes { debug { / ...
flutter引入高德地图_Flutter高德地图插件
ai_amap |:-| totem Effect 地图.jpg 定位.jpg 导航.jpg 导航.jpg 1.安装使用当前包作为依赖库 1. 依赖此库在文件 'pubspec.yaml' 中添加 ...
vue-cli中使用高德地图及其插件
一.先去高德地图Api申请账号,创建账号->创建应用->添加key(很重要,没有key下面步骤无意义) 高德地图网址:高德地图API 二.在vue-cli中下载高德地图插件 npm i ...
高德地图点聚合插件AMap.MarkerClusterer报错Uncaught TypeError: Cannot read properties of null (reading ‘Md‘)
报错信息:Uncaught TypeError: Cannot read properties of null (reading 'Md') mapscallback=___onAPILoaded&a ...

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

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

最新文章

热门文章