高德地图, 动态绘制多个marker 并 随着地图缩放, 判定marker之间的距离, 显示不同 marker 效果

最新推荐文章于 2024-04-22 14:45:01 发布
最新推荐文章于 2024-04-22 14:45:01 发布
阅读量2.4k 收藏 5
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41737172/article/details/118538884
版权

绘制 县/乡 范围; 县用大圆标识, 乡用小圆标识;
随着地图缩放倍数, 距离大圆近的小圆会被隐藏
在这里插入图片描述

在这里插入图片描述

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>CircleMarker</title>
  <style type="text/css">
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=2cc213d13f7567d2723e87c1540625b5&plugin=AMap.MouseTool,AMap.DistrictSearch"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
</head>

<body>
  <div id="map"></div>
  <script>
    var mapZoom = 10;

    var map = new AMap.Map('map', {
      // viewMode: '3D',
      zoom: mapZoom,
      center: [110.296475, 25.276583]
    })

    var g_data = [{
      id: 'A',
      center: [110.67811, 25.617017],
      state: 1,
      name: '兴安',
      list: [
        {
          id: 'A2',
          center: [110.719504, 25.454789],
          state: 2,
          name: '白石乡',
        },
        {
          id: 'A1',
          center: [110.701107, 25.549232],
          state: 1,
          name: '崔家乡',
        }
      ]
    }, {
      id: 'B',
      center: [111.070567, 25.929973],
      state: 2,
      name: '全州',
      list: [
        {
          id: 'b2',
          center: [111.172537, 25.873726],
          state: 2,
          name: '白宝乡',
        }
      ]
    }, {
      id: 'C',
      center: [111.159831, 25.490721],
      state: 3,
      name: '灌阳',
      list: [
        {
          id: 'c2',
          center: [111.055255, 25.356615],
          state: 2,
          name: '黄关镇',
        }
      ]
    }, {
      id: 'd',
      center: [109.983031, 24.979317],
      state: 4,
      name: '永福',
      list: [
        {
          id: 'd2',
          center: [109.985912, 24.928515],
          state: 2,
          name: '广福乡',
        }
      ]
    }
    ];
    var p_data = [];
  </script>
  <script>
    //  高德判定距离
    var yuandian = '';
    var bijiaodian = '';
    var x_dis = '';
    var data1
    var xlist = []
    var xlist1 = []

    var arr_new = [];
    function test2() {
      var brr = g_data.slice();
      $.each(brr, function (i, value) {
        var arr_s = {
          id: value.id,
          name: value.name,
          center: value.center,
          state: value.state,
          list: [{ dis: '' }],
        }
        arr_new.push(arr_s)
        yuandian = brr[i].center;
        $.each(brr[i].list, function (j, value) {
          x_dis = jisuan1(yuandian, value.center)
          brr[i].list[j].dis = x_dis;
          arr_new[i].list[j] = value;
        })
      })
      screenList();
    }

    test2();

    function jisuan1(p1, p2) {
      // 返回 p1 到 p2 间的地面距离，单位：km
      var dis = AMap.GeometryUtil.distance(p1, p2) / 1000;
      var disz = Math.round(dis * 10) / 10;
      return disz;
    }

    var arr_show = [];
    var xlist = [];
    function screenList() {
      var targetDistance = 0;   //当前距离数
      var zoom = mapZoom;
      switch (zoom) {
        case 3:
          var targetDistance = 50;  //km
          break;
        case 4:
          var targetDistance = 40;  //km
          break;
        case 5:
          var targetDistance = 30;  //km
          break;
        case 6:
          var targetDistance = 21;  //km
          break;
        case 7:
          var targetDistance = 20;  //km
          break;
        case 8:
          var targetDistance = 19;  //km
          break;
        case 9:
          var targetDistance = 12;  //km
          break;
        case 10:
          var targetDistance = 5;  //km
          break;
        case 11:
          var targetDistance = 4;  //km
          break;
        case 12:
          var targetDistance = 1;  //km
          break;
        case 13:
          var targetDistance = 0.5;  //km
          break;
        default:
          var targetDistance = 0.25;  //km
      }
      arr_show = [];

      var brr = arr_new.slice();
      $.each(brr, function (i, value) {
        var arr_s = {
          id: value.id,
          name: value.name,
          center: value.center,
          state: value.state,
          list: []
        }
        arr_show.push(arr_s)
        $.each(brr[i].list, function (j, val) {
          if (zoom > 7) {
            if (val.dis > targetDistance) {
              value_n = val
            } else {
              value_n = ""
            }
            arr_show[i].list.push(value_n)
          } else {
            arr_show[i].list.push([])
            return
          }
        })
      })

      drawList(arr_show);
    }

    // 绘制cir
    var circleMarkers = [];
    function drawList(data) {
      map.clearMap();

      // 绘制县
      circleMarkers = [];
      for (var i = 0; i < data.length; i++) {
        var center = data[i].center;
        var state = data[i].state;
        if (state == 1) {
          color = "red"
        } else if (state == 2) {
          color = "orange"
        } else if (state == 3) {
          color = "yellow"
        } else {
          color = "green"
        }

        var circleMarker_x = new AMap.CircleMarker({
          center: center,
          // radius: 10 + Math.random() * 10,//3D视图下，CircleMarker半径不要超过64px
          radius: 40,//3D视图下，CircleMarker半径不要超过64px
          strokeColor: 'white',
          strokeWeight: 2,
          strokeOpacity: 0.5,
          fillColor: color,
          fillOpacity: 0.5,
          zIndex: 10,
          bubble: true,
          cursor: 'pointer',
          clickable: true
        })
        circleMarkers.push(circleMarker_x);
        map.add(circleMarker_x);

        // 绘制乡
        for (var j = 0; j < data[i].list.length; j += 1) {
          var list = data[i].list;
          var center = list[j].center;
          var state = list[j].state;
          if (state == 1) {
            color = "red"
          } else if (state == 2) {
            color = "orange"
          } else if (state == 3) {
            color = "yellow"
          } else {
            color = "green"
          }
          var circleMarker_s = new AMap.CircleMarker({
            center: center,
            // radius: 10 + Math.random() * 10,//3D视图下，CircleMarker半径不要超过64px
            radius: 20,//3D视图下，CircleMarker半径不要超过64px
            strokeColor: 'white',
            strokeWeight: 2,
            strokeOpacity: 0.5,
            fillColor: color,
            fillOpacity: 0.5,
            zIndex: 10,
            bubble: true,
            cursor: 'pointer',
            clickable: true
          })
          //circleMarker.setMap(map);
          map.add(circleMarker_s);
        }
      }
    }

    //绑定地图缩放事件
    $(document).on("mousewheel DOMMouseScroll", function (e) {
      var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
      if (delta > 0) {
        // 向上滚
        addmap();
      } else if (delta < 0) {
        // 向下滚
        pushmap();
      }
    });

    function addmap() {
      if (mapZoom < 15) {
        mapZoom = mapZoom + 1;
        map.setZoom(mapZoom);
        screenList();
      }
      if (mapZoom < 9) {
        map.remove(circleMarkers);
      }
    }

    function pushmap() {
      if (mapZoom > 3) {
        mapZoom = mapZoom - 1;
        map.setZoom(mapZoom);
        screenList();
      }
      if (mapZoom < 9) {
        map.remove(circleMarkers);
      }
    }
  </script>
</body>
</html>
qq_41737172
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp小程序map（点击地图增加maker，聚合、自定义聚合样式）
_小郑有点困了的博客
12-28 2959
小程序端开发地图组件，点击地图上任何一个位置，增加一个maker，点击maker触发另外的事件。
高德地图 自定义点标志 缩放事件的设置，在vue
Yipitre的博客
11-20 2172
将高德地图的css放在index <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> 引入高德地图，也是在index.html中添加，key需要在高德地图官网中申请 <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key值"></script> .
微信小程序map地图Marker过多优化
最新发布
蓝色之恋love的博客
04-22 251
map地图能拿到当前地图显示范围和缩放比例，根据当前显示范围排除掉范围之外的marker,再根据缩放比例控制每个marker在一定的范围内只出现1个markers，来控制当前显示区域内marker过多的问题。
Tableau_day6
zz0377的博客
10-25 348
1. 填充地图 1.1 各省售电量填充地图 导入数据 设置地理格式 双击 省市， 生成一个符号地图 将当期值放入颜色，生成填充地图（在地理面积内进行颜色填充） 设置颜色 设置未知 设置 位置 标签，显示位置信息 修改某些位置信息 要调整注释边框 此时有两个位置标签，将原来的位置标签设置为 从不显示 同理，处理蒙东，``等标签 当使用鼠标缩放地图之后，地图没有办法居中， 此时可以点击左上角 重置地图 1.2 地图格式设置 选择
高德地图点标记随着地图放大缩小位置改变的解决办法
weixin_43791884的博客
01-13 2142
高德地图点标记随着地图放大缩小位置改变的解决办法
小程序map地图上显示多个marker
热门推荐
weixin_42274835的博客
08-15 2万+
  wxml &lt;map id="myMap" style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location bindmarkertap="sele
Android 高德地图自定义点聚合marker图片及Overlay点击选中功能
04-29
Android 高德地图自定义点聚合marker图片及Overlay点击选中功能的代码实现及布局文件
高德地图显示多个标注点 弹跳效果 title
11-02
使用高德地图显示多个标注点 有 弹跳效果 可自定义 title
百度地图多个marker展示infowindow
04-16
百度地图上展示多个marker的同时，能展示多个infowindow，避免只有最后一个infowindow能展示的问题。 博客地址：http://blog.csdn.net/qq_19666821/article/details/70195267
Android基于高德地图完全自定义Marker的实现方法
08-27
主要给大家介绍了关于Android基于高德地图完全自定义Marker的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Android 百度地图marker中图片不显示的解决方法(推荐)
08-28
下面小编就为大家分享一篇Android 百度地图marker中图片不显示的解决方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
高德地图的zoom放大倍数根据marker来控制_Python Folium（二）地图神器之地图标记、打点、测距、密度图绘制...
weixin_39668479的博客
01-10 2036
上一篇我们介绍了热力图的绘制方法，本章我们介绍一下Folium的其他常见地图绘制方法。Folium是通过folium.Map()来显示地图folium.Map(location=None, width='100%', height='100%', left='0%', top='0%', position='relative', tiles='OpenStreetMap',...
高德地图随着地图的放大与缩小来显示或者隐藏infoWindow信息窗体
weixin_46031207的博客
05-20 922
上述代码中，创建了一个位于[116.39, 39.9]位置的Marker，并监听了地图的缩放事件。当地图缩放级别小于10时，将该Marker的信息窗口（使用setInfoWindow()方法）设置为null，从而隐藏信息窗口；当地图缩放级别大于等于10时，重新设置信息窗口（使用new AMap.InfoWindow()方法）并显示该信息窗口。在默认情况下，当点击标记或区域时，信息窗口会弹出并显示相关信息。
使用高德地图API判定目标点是否在用户编辑的任意多边形中
JustWith的博客
09-10 2130
在许多信息统计系统中，用户可能希望在地图中划定一块任意多边形区域，系统便会自动反馈该区域的相关目标信息。例如在学区信息系统中，用户在应用的地图上划定一块区域便能够知道这个区域中有多少小学以及小学的相关信息。 这里的核心问题在于如何判断所需计算的点是否在我编辑的任意多边形中，所以这里我使用到了高德地图API的工具类mouseTool。 这里我先写了个demo，它可以判定我设定的点marker...
实现小程序地图marker标记（小程序地图实现多个标记点）
Amy_ly的博客
09-27 4614
小程序地图实现多个标记点
uniapp 小程序和app map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效
weixin_43929450的博客
12-17 1万+
最近正在做小程序地图，收到ui 给的图，一开始以为很简单的，但在看了ui 给的图以后，发现没有这么简单。下面是ui给的图：于是花了很长的时间，走了很多坑才最终实现，来看效果链接：图片如下：接下来我将花点时间来说说如何实现和所遇到的坑！！如果需要完整的demo 代码，请联系 1015095073 @qq . com。
高德地图里面自定义多个Marker，Marker设置缩放动画
baidu_41624013的博客
10-13 2832
Android 在高德地图里面自定义多个Marker，Marker设置缩放动画 一、使用步骤 1.引入库 在app的build.gradle里面添加 implementation files(‘libs/Android_Map3D_SDK_V7.4.0_20200416.jar’) implementation files(‘libs/AMap_Search_V7.3.0_20200331.jar’) 2.xml代码 <com.xishui.mapview.CommonMapView
vue 高德地图Marker缩放消失
11-08
在Vue高德地图中，当地图缩放级别发生变化时，Marker可能会消失。这是因为Marker的显示与地图缩放级别有关，当地图缩放级别过高或过低时，Marker可能会被隐藏。为了解决这个问题，可以使用MarkerClusterer插件对Marker进行聚合展示，从而在不同的地图缩放级别下展示Marker。另外，也可以通过设置Marker的offset属性来调整Marker的位置，以适应不同的地图缩放级别。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值