• 高德地图1.点聚合 2.放大到最大级别后没办法继续显示(点距离过近,或是同一个经纬度)


    1.引用
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.MouseTool,AMap.MarkerClusterer"></script>


    2.使用

    window.showAllPoint = function(allMarkers) { overlayGroups = []; //清空覆盖物群组集合 markers = []; //清空点的集合 polyline = null; //清空线标记 polyGon = null; //清空面标记 for(var i = 0; i < allMarkers.length; i++) { var point = eval(allMarkers[i].lnglat); var radius = parseFloat(allMarkers[i].radius); //圆半径 //如果是点标记 if(allMarkers[i].types == 1) { //创建点实例 marker = new AMap.Marker({ position: new AMap.LngLat(point[0], point[1]), title: allMarkers[i].name, map: map, icon: allMarkers[i].icon }); if(nowpage == 'gdiframe') marker.content = setInfoContent(allMarkers[i]); marker.on('click', markerClick); markers.push(marker); // 创建覆盖物群组,并将 marker 传给 OverlayGroup //overlayGroups = new AMap.OverlayGroup(markers); // 添加覆盖物群组 //map.add(overlayGroups); } //如果是线标记 else if(allMarkers[i].types == 2) { //创建线实例 polyline = new AMap.Polyline({ path: point, strokeColor: allMarkers[i].color || allMarkers[i].backgrse || "red", strokeOpacity: 1, strokeWeight: 2, strokeStyle: 'solid', strokeDasharray: [10, 5], geodesic: true }); polyline.setMap(map); if(nowpage == 'gdiframe') polyline.content = setInfoContent(allMarkers[i]); polyline.on('click', lineOrFaceClick); } //如果是面/矩形标记 else if(allMarkers[i].types == 3 || (allMarkers[i].types == 4)) { //创建面实例 polyGon = new AMap.Polygon({ path: point, map: map, strokeColor: allMarkers[i].color || allMarkers[i].backgrse || "red", strokeOpacity: 1, strokeWeight: 2, strokeStyle: 'solid', strokeDasharray: [10, 5], fillColor: allMarkers[i].color || allMarkers[i].backgrse || "red", fillOpacity: 0.2, geodesic: true }) if(nowpage == 'gdiframe') polyGon.content = setInfoContent(allMarkers[i]); polyGon.on('click', lineOrFaceClick); } //如果是圆形标记 else if(allMarkers[i].types == 5) { //创建圆实例 polyGon = new AMap.Circle({ center: point, radius: radius, map: map, strokeColor: allMarkers[i].color || allMarkers[i].backgrse || "red", strokeOpacity: 1, strokeWeight: 2, strokeStyle: 'solid', strokeDasharray: [10, 5], fillColor: allMarkers[i].color || allMarkers[i].backgrse || "red", fillOpacity: 0.2, geodesic: true }) if(nowpage == 'gdiframe') polyGon.content = setInfoContent(allMarkers[i]); polyGon.on('click', lineOrFaceClick); } } cluster = new AMap.MarkerClusterer(map, markers, {gridSize: 80});//点聚合
        

    // 获取地图的缩放级别,如果级别已经是最高,那么点击后,显示聚合点内的点信息
    cluster.on('click',function(e,markers){
    if(map.getZoom() == 18){
    var itemsContent = "";
    e.markers.forEach(function (item, index) {
    itemsContent += item.content;
    // console.log(itemsContent);
    });
    e.markers.forEach(function (item, index) {
    infoWindow.setContent(itemsContent);
    infoWindow.open(map, item.getPosition());
    });
    }



    })


    map.setFitView(); }
  • 相关阅读:
    node.js模块本地代理模块(将自己本机/局域网)服务 代理到外网可以访问
    node.js基本概念简单解释
    RN 使用第三方组件之react-native-image-picker(拍照/从相册获取图片)
    RN 上传文件到以及上传文件到七牛云(初步)
    【HTML+CSS+JavaScript+Bootstrap+Vue】选项卡(两种方式)
    【HTML+CSS+JavaScript+Bootstrap+Vue】登录(获取表单数据)
    【HTML+CSS+JavaScript+Bootstrap+Vue】待办事项
    第六章 前端开发——Vue框架
    第五章 前端开发——Boostrap
    【HTML+CSS+JavaScript(jQuery)】轮播图
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/11993725.html
Copyright © 2020-2023  润新知