高德地图地图层级不同显示marker数量不同
页面渲染获取经纬度数据(mapData)以后初始化地图initMap()方法
页面效果
放大比例后点数变多
在这里插入图片描述
<template><div class="hot_wrapper"><div class="map"><div style="height:100%;width:100%;outline: none!important;" id="container" tabindex="0"> </div></div></div>
</template><script>
import AMap from "AMap";
export default {data() {return {adCode: 330600, // 绍兴disProvince: null, // 区域图层depth: 2, // 区域等级 0省级 1市级 2区县级colors: {}, // 区域颜色330683 山乘州市// 330624 新昌县// 330604 上虞区// 330602 越城区// 330603 柯桥区// 330681 诸暨市city: '绍兴市',mapData:[],//地图经纬度数据mapDataMarker:[],//图层级变化点数量个数变化pathContentArr:[],//地图层级变化点数量提示unitId:'',//单位idiconPath:'',//图标路径} },methods:{initMap() {// 创建地图var that = thisthis.map = new AMap.Map('container', {zoom:10,zooms: [10,14],center:[120.535719,29.956348],// center:[120.580444,29.859701],resizeEnable: true,showIndoorMap: false,mapStyle:"amap://styles/0206dfbcbabc11e4971c1a2e6bcdda2e",// mapStyle:"amap://styles/darkblue",features:['point','road','bg'],//地图要素viewMode:"2D",pitch:45,zoomEnable:true,// dragEnable: false,})AMap.plugin('AMap.Geocoder', function() {that.geocoder = new AMap.Geocoder({})})that.drawMarkerByDistance(that.map.getZoom())//初始调用marker过滤方法。渲染地图this.map.on("zoomchange",function(){//改变层级。点位重新渲染//清除地图上点位信息for (var i = that.mapDataMarker.length - 1; i >= 0; i--) {that.mapDataMarker[i].setMap(null);}for (var i = that.pathContentArr.length - 1; i >= 0; i--) {that.pathContentArr[i].setMap(null);}that.mapDataMarker=[];that.pathContentArr=[];that.drawMarkerByDistance(that.map.getZoom())})},},Rad(d){//经纬度转换成三角函数中度分表形式。return d * Math.PI / 180.0;},//计算距离,参数分别为第一点的纬度,经度;第二点的纬度,经度GetDistance(lat1,lng1,lat2,lng2){var radLat1 = this.Rad(lat1);var radLat2 = this.Rad(lat2);var a = radLat1 - radLat2;var b = this.Rad(lng1) - this.Rad(lng2);var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));s = s *6378.137 ;// EARTH_RADIUS;s = Math.round(s * 10000) / 10000; //输出为公里return s;},//计算距离渲染点位drawMarkerByDistance(zoom){var that=this;var perDistance=0; //当前累计公里数var zoom=zoom||10;switch (zoom){case 10:var targetDistance=20 //kmbreak;case 11:var targetDistance=10; //kmbreak;case 12:var targetDistance=5; //kmbreak;case 13:var targetDistance=1; //kmbreak;default:var targetDistance=0.25; //km}var prepareToShowMarker=[];//复制获取的经纬度数据,进行条件筛选prepareToShowMarker=JSON.parse(JSON.stringify(that.mapData))for(var i in prepareToShowMarker){prepareToShowMarker[i].count=1}var select=function(arr){//筛选函数var flag=true;for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){var curdistance= that.GetDistance(arr[i].latitude,arr[i].longitude,arr[j].latitude,arr[j].longitude);//如果还有靠得很近的点if (curdistance<targetDistance) {flag=false;//固定删掉一个点arr[i].count=arr[i].count+arr[j].count;arr.splice(j,1)//随机剔除掉一个i和j之间的一个点//var randomNum= Math.random();// if(randomNum>0.5){// arr[j].count=arr[j].count+arr[i].count;// }else{// arr[i].count=arr[i].count+arr[j].count;// }// randomNum>0.5?arr.splice(i,1):arr.splice(j,1);break;}}if(flag==false){break;}}//当数组中所有的点两两之间的距离都大于targetDistance的时候退出递归if (flag==false) {select(arr);}}// 筛选点数select(prepareToShowMarker);// 循环渲染到地图上prepareToShowMarker.forEach(function(marker){//点数渲染var index=new AMap.Marker({map: that.map,icon: new AMap.Icon({ image: that.iconPath,size: new AMap.Size(70, 70), //图标大小imageSize: new AMap.Size(70, 70)}),position: [marker.longitude, marker.latitude],offset: new AMap.Pixel(-13, -30),clickable: true});that.mapDataMarker.push(index)index.on('click', markerUnitClick);//数量提示var num = new AMap.Marker({//创建报警数content:`<span style="color:#fff;text-align: center;">${marker.count}</span>`,offset: new AMap.Pixel(10,-22) // 相对于基点的偏移位置});num.setMap(that.map);num.setPosition([marker.longitude, marker.latitude]);that.pathContentArr.push(num)num.on('click', markerUnitClick);function markerUnitClick(){that.$emit('markerUnitMap',marker.id);}})}
}
高德地图地图层级不同显示marker数量不同相关推荐
- 百度地图调用加载显示Marker,并添加点击事件
百度地图调用加载显示Marker,并添加点击事件 注册百度开发者账号,申请应用AK 百度地图开发平台官网 点击右上角控制台,选择创建应用 创建应用,勾选浏览器端,白名单填写* 注:如上线更改为公网IP ...
- 关于Android集成高德地图的那些事儿...显示地图
记得在2016年的时候, 有个项目需要在地图上添加Marker 并且连点成线记录坐标 和 地理围栏, 当时也是第一次做,确实有点懵, 不过时间久了, 也还挺简单的 ; 最近项目中又用到了地图 , 借 ...
- 高德地图 - 点击改变当前 marker 图标(marker点击切换 icon 上一个 icon 恢复原样)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- html百度地图中心点不正确,百度地图嵌入弹出层,无法准确正确显示marker标记到中心位置的问题...
最近同事遇到了一个问题,找我帮忙,先说下情况: 1,页面中有一个弹出框,也就是弹出层,弹出层里面的html是实用table, 其中一个tr中使用div作为百度地图的容器 如图: 2,打开弹出层后,根据 ...
- 加载调用本地百度地图资源,附地图下载器及黑龙江省1-16级瓦片地图,加载显示marker
业务适用场景说明 适用范围,需要局域网或者本地环境加载显示百度地图及展示marker的业务场景,可以根据业务使用场景下载不同地区等级的地图瓦片.由于瓦片文件过大,建议放在本地服务器上. 已有1-16级 ...
- 设置高德地图在Fragment中显示
本文来自:fair-jm.iteye.com 转截请注明出处 官网的教程是在Activity下 在Fragment下在高德论坛找到一些方法 试了下可以显示 但是切换后总会有些问题 比如切换后就是新的了 ...
- vue高德/腾讯地图只显示某一区域的地图,其他地区不显示
一.高德地图 index.html 页面加上<script type="text/javascript" src="https://webapi.amap.com ...
- 自制导航App(包含地图、定位、自定义marker、路线制定、模拟导航等功能)
高德地图路线导航制作 转载请注明出处:https://blog.csdn.net/Dreamer_man/article/details/104193832 由于公司项目需求,特地去官网,重新温习了一 ...
- mapbox 接入高德矢量地图实战
Mapbox 作为现如今比较流行的地图框架为我们提供了漂亮的个性化地图,在平常的使用过程中可以方便的接入高德/谷歌等矢量切片地图.由于Mapbox地图数据来源于Open Street Map等国外厂商 ...
最新文章
- opencv图像处理梯度边缘和角点
- 基于kafka_2.11-2.1.0实现的生产者和消费者代码样例
- Anaconda python3.6版本下载
- SAP CRM pricing read的实现逻辑
- why process type for MyOpportunity creation is empty
- vba执行linux命令,如何使用vba的shell()运行参数的.exe?
- python中的排序方法都有哪些_Python中的排序方法sort(),sorted(),argsort()等
- Spring Batch示例教程
- ubuntu 16.04安装mysql_Ubuntu 16.04 安装mysql 5.7.16
- java中final语句_Java中使用非final变量的不可访问语句
- 递归算法经典实例_【经典算法】利用递归方法求5!
- 开店软件透彻分析推荐
- 如何有逻辑的,简单清晰的回应问题
- Asp.Net MVC Web应用程序中的安全向量
- Wonderware Intouch 2014R2 SP1授权教程
- arcMap安装教程
- linux svn切换分支,玩转SVN-分支
- layim即时通讯实例各功能整合
- 不要再「外包」AI 模型了!最新研究发现:有些破坏机器学习模型安全的「后门」无法被检测到...
- 2018计算机项目管理报考,2018年上半年信息系统项目管理师考试下午试题Ⅱ