地图点聚合以及信息弹窗

最新推荐文章于 2024-06-20 18:39:40 发布

琳琳的丫头

最新推荐文章于 2024-06-20 18:39:40 发布

阅读量535

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45895331/article/details/125178695

版权

本文探讨了在前端开发中如何实现地图上的点聚合功能，当地图缩放时，密集的标记点自动聚合为一个点，减少视觉混乱。同时介绍了信息弹窗的动态显示，点击聚合点或单个点时，展示详细信息。涵盖了JavaScript地图库的使用、事件监听和自定义图标等内容。

摘要由CSDN通过智能技术生成

<template>
  <div class="container">
    <div class="levelTop">
      <a-row style="margin-left: -35px; margin-top: 20px">
        <a-col :span="8" style="height: 40px; margin-left: -30px">
          <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="所属机构">
              <a-tree-select
                style="width: 200px"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                placeholder="请选择所属机构"
                :showSearch="true"
                searchPlaceholder="请输入机构名称搜索"
                :treeNodeFilterProp="'title'"
                tree-default-expand-all
                v-model="queryInfo.subBrNo"
                :replaceFields="{
                  children: 'subBrList',
                  title: 'brName',
                  key: 'brNo',
                  value: 'brNo',
                }"
                @select="select"
              >
              </a-tree-select>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="8" style="margin-left: -40px">
          <a-form :l