大屏地图区域显示、复选框多选打点，自定义窗体信息（vue3+TS)

效果图：

NPM 安装 Loader：
npm i @amap/amap-jsapi-loader --save

并设置 key 和安全密钥：

import AMapLoader from '@amap/amap-jsapi-loader';//引入高德地图

window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "替换为你申请的 key", //申请好的 Web 端开发 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    AMapUI: {
      //是否加载 AMapUI，缺省不加载
      version: "1.1", //AMapUI 版本
      plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
    },
    Loca: {
      //是否加载 Loca， 缺省不加载
      version: "2.0", //Loca 版本
    },
  })
    .then((AMap) => {
      var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
      map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
完整代码：
<template>
  <div id="map-chart"></div>
  <a-checkbox-group v-model:value="value" @change="changeCheckbox">
    <a-checkbox value="loc">坐标打点</a-checkbox>
    <a-checkbox value="text">文字打点</a-checkbox>
  </a-checkbox-group>
</template>

<script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader';//引入高德地图
import { onMounted, ref, onUnmounted } from 'vue';

// 声明全局变量 _AMapSecurityConfig
declare global {
  interface Window {
    _AMapSecurityConfig: {
      securityJsCode: string;
    };
  }
}
// 高德地图安全码
window._AMapSecurityConfig = {
  securityJsCode: '2bd59df65eacf33784ed68fbaa369b45',
}
let map;

const value = ref([]);
const locList = [[108.034657, 32.06777], [107.511763, 31.196079],
[107.931884, 31.354703]
];
const textList = [
  {
    name: '通川区',
    position: [107.504962, 31.214231],
    contant: '通川区人杰地灵'
  },
  {
    name: '大竹县',
    position: [107.20742, 30.736122],
    contant: '大竹县人杰地灵'
  },
  {
    name: '渠县',
    position: [106.970746, 30.836348],
    contant: '渠县人杰地灵'
  }
];
const countyList = [
  { name: '通川区', position: [107.42, 31.15], scaleLevel: 10.5 },
  { name: '达川区', position: [107.47763, 31.35], scaleLevel: 11 },
  { name: '大竹县', position: [107.26742, 30.668], scaleLevel: 10.5 },
  { name: '渠县', position: [106.970746, 30.96348], scaleLevel: 10.5 },
  { name: '开江县', position: [107.868609, 31.012945], scaleLevel: 11 },
  { name: '宣汉县', position: [107.931884, 31.544703], scaleLevel: 10 },
  { name: '万源市', position: [108.034657, 32.00777], scaleLevel: 10 }
]
var triMarkers = new Array();
var textMarkers = new Array();
var countyMarkers = new Array();//存放县级行政区划名称标识
var infoWindow;//信息窗口
let addLocMark = () => { };
let addTextMark = () => { };
let delLocMark = () => { };
let delTextMark = () => { };
function changeCheckbox(e) {
  if (e.includes('loc')) {
    addLocMark();
  }
  if (e.includes('text')) {
    addTextMark();
  }
  if (!e.includes('loc')) {
    delLocMark();
  }
  if (!e.includes('text')) {
    delTextMark();
  }
}

onMounted(async () => {

  // 加载高德地图
  AMapLoader.load({
    key: "c0be00cd6badf373c1f9fd9a8f0114af", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.DistrictSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {//加载成功
    map = new AMap.Map("map-chart", {  //设置地图容器id
      zoom: 8.9,           //初始化地图级别
      center: [107.56778, 31.309278], //初始化地图中心点位置
    });
    map.setMapStyle("amap://styles/darkblue");//设置地图样式
    //加载行政区划插件,用于绘制行政区划边界,区域面等功能
    AMap.plugin('AMap.DistrictSearch', function () {
      // 创建行政区查询对象
      var district = new AMap.DistrictSearch({
        // 返回行政区边界坐标等具体信息
        extensions: 'all',
        // 设置查询行政区级别为 市
        level: 'city'
      })
      // 调用 DrawSection 函数，参数为城市名、行政区划对象和是否搜索下一级标志
      DrawSection('达州市', district, true);
      // 绘制行政区划
      function DrawSection(cityName, district, isSearchNextLevel) {
        // 使用 district 对象的 search 方法查询指定的城市名
        district.search(cityName, function (status, result) {
          // 从查询结果中提取边界信息
          const bounds = result.districtList[0].boundaries;

          // 如果边界信息存在，则开始绘制
          if (bounds) {
            // 遍历所有边界
            for (let i = 0; i < bounds.length; i += 1) {
              if (isSearchNextLevel) {
                // 如果是搜索下一级（这里是市的级别），则绘制市的板块
                new AMap.Polygon({
                  map, // 设置地图实例
                  path: bounds[i], // 设置多边形路径
                  strokeColor: '#1ee7e7', // 设置线条颜色
                  fillColor: '#003c70', // 设置填充颜色
                  fillOpacity: 0.5 // 设置填充透明度
                });
              } else {
                // 如果不是搜索下一级（这里是县的级别），则绘制县的边界线
                new AMap.Polyline({
                  path: bounds[i], // 设置折线路径
                  strokeColor: '#1ee7e7', // 设置线条颜色
                  map // 设置地图实例
                });
              }
            }

            // 如果需要搜索下一级，并且有下一级行政区划信息
            if (isSearchNextLevel) {
              const districtList = result.districtList[0].districtList;
              // 遍历下一级行政区划列表
              for (let i = 0; i < districtList.length; i += 1) {
                // 递归调用 DrawSection，绘制下一级行政区划
                DrawSection(districtList[i].name, district, false);
              }
            }
          }
        });
      }
      // 隐藏其他地图添加遮罩层
      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].boundaries
        var pathArray = [
          outer
        ]
        pathArray.push.apply(pathArray, holes)//将holes数组中的元素添加到pathArray数组中
        var polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: '#1ee7e7',//线颜色
          strokeWeight: 3,
          fillColor: '#05143e',//填充色
          fillOpacity: 0.8,
        })
        polygon.setPath(pathArray)
        map.add(polygon)
      })
    });

    //添加县级行政区划名称标识，可点击放大
    countyList.forEach((item) => {
      var countyMarker = new AMap.Marker({
        position: item.position,
        content: `<div style="color:#44f3fb;font-size:16px">${item.name}</div>`,
        offset: new AMap.Pixel(-20, -20)
      });
      map.add(countyMarker);
      countyMarkers.push(countyMarker);
      countyMarker.on('click', function (e) {
        map.setZoomAndCenter(item.scaleLevel, item.position);
      });
    });

    addLocMark = () => {
      locList.forEach((item) => {
        var marker = new AMap.Marker({
          position: item,
        });
        map.add(marker);
        triMarkers.push(marker);
      });
    };
    delLocMark = () => {
      map.remove(triMarkers);
    };
    addTextMark = () => {
      textList.forEach((item) => {
        var marker = new AMap.Marker({
          position: item.position,
          content: `<div class="text-mark">${item.name}</div>`,
          offset: new AMap.Pixel(-20, -20)
        });
        marker.on('click', function (e) {
          infoWindow = new AMap.InfoWindow({
            content: `<p style="color:#44f3fb;font-size:16px">标题：${item.name}</p>
          <div class="text-info">${item.contant}</div>`,
            offset: new AMap.Pixel(0, -30)
          });
          infoWindow.open(map, e.target.getPosition());
        });
        map.add(marker);
        textMarkers.push(marker);
      });
    };
    delTextMark = () => {
      map.remove(textMarkers);
      infoWindow.close();
    };
  }).catch(e => {
    console.error(e);
  });
});

onUnmounted(() => {
  map.destroy();
});
</script>

<style scoped lang="less">
#map-chart {
  width: 952px;
  height: 96%;
}

.ant-checkbox-wrapper {
  margin: 0;
  color: aliceblue;
  font-size: 16px;
}

.ant-checkbox-group {
  display: grid;
  gap: 10px;
  position: absolute;
  top: 150px;
  left: 520px;
  padding: 10px;
  background: rgba(33, 254, 254, 0.15);
  border-radius: 4%;
}
</style>
<style type="text/css">
.amap-logo {
  display: none;
  opacity: 0 !important;
}

.amap-copyright {
  opacity: 0;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/874048.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[数据集][目标检测]百事可乐可口可乐瓶子检测数据集VOC+YOLO格式195张2类别

[数据集][目标检测]百事可乐可口可乐瓶子检测数据集VOC+YOLO格式195张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;195 标注数量(xml文件个数)&#xff1a;195 标注数量(txt文件个数)&#xff1a;195 标注类别…
阅读更多...
前端登录鉴权——以若依Ruoyi前后端分离项目为例解读

前端登录鉴权——以若依Ruoyi前后端分离项目为例解读

权限模型 Ruoyi框架学习——权限管理_若依框架权限-CSDN博客 用户-角色-菜单&#xff08;User-Role-Menu&#xff09;模型是一种常用于权限管理的设计模式&#xff0c;用于实现系统中的用户权限控制。该模型主要包含以下几个要素&#xff1a; 用户&#xff08;User&#xff09;…
阅读更多...
【VSCode v1.93.0】手动配置远程remote-ssh

【VSCode v1.93.0】手动配置远程remote-ssh

开发环境 VS Code版本&#xff1a;1.93.0 (Windows) Ubuntu版本&#xff1a;20.04 使用VS Code 插件remote-ssh远程访问Ubuntu服务器中的代码&#xff0c;若Ubuntu无法联网&#xff0c;在连接的时候会报错&#xff1a; Could not establish connection to "xxxx": F…
阅读更多...
店匠科技携手Stripe共谋电商支付新篇章

店匠科技携手Stripe共谋电商支付新篇章

在全球电商行业蓬勃发展的背景下,支付环节作为交易闭环的核心,其重要性日益凸显。随着消费者对支付体验要求的不断提高,以及跨境电商的迅猛发展,支付市场正经历着前所未有的变革与挑战。在这一充满机遇与竞争的领域,店匠科技(Shoplazza)凭借其创新的嵌入式支付解决方案—— Sho…
阅读更多...
【Obsidian】同步插件 Remotely Save 的应用介绍

【Obsidian】同步插件 Remotely Save 的应用介绍

背景 引言&#xff0c;大多数的笔记软件数据都存储在云端&#xff0c;这样如果是没网络&#xff0c;或者笔记服务器崩溃故障&#xff0c;那么你就无法访问自己的笔记了&#xff0c;前段时间的语雀系统崩溃&#xff0c;不知道你有没有了解&#xff1f; 所以笔记在自己手里&…
阅读更多...
第四届“长城杯”网络安全大赛 暨京津冀网络安全技能竞赛（初赛） 全方向 题解WriteUp

第四届“长城杯”网络安全大赛 暨京津冀网络安全技能竞赛（初赛） 全方向 题解WriteUp

战队名称&#xff1a;TeamGipsy 战队排名&#xff1a;18 SQLUP 题目描述&#xff1a;a website developed by a novice developer. 开题&#xff0c;是个登录界面。 账号admin&#xff0c;随便什么密码都能登录 点击头像可以进行文件上传 先简单上传个木马试试 测一下&…
阅读更多...
ComfyUI-图片表情控制工作流整合包，相关软件包及工作流均已打包好，一键启动即可

ComfyUI-图片表情控制工作流整合包，相关软件包及工作流均已打包好，一键启动即可

前言 本期给大家带来基于LivePortrait的ComfyUI图片表情控制工作流&#xff0c;还可以通过控制表情变化及参考视频生成动态肖像。 此工作流操作简单&#xff0c;相关ComfyUI软件包、模型、节点、工作流均已打包在内&#xff0c;一键启动即可。 # 配置要求&#xff1a; 建议电…
阅读更多...
基于 TiDB 资源管控 + TiCDC 实现多业务融合容灾测试

基于 TiDB 资源管控 + TiCDC 实现多业务融合容灾测试

导读 随着金融行业的不断发展&#xff0c;多个业务系统的整合成为了趋势&#xff0c;分布式数据库的应用也愈发广泛。为了应对多业务融合带来的复杂性&#xff0c;金融机构需要在保障各业务系统高效运行的同时&#xff0c;确保 IT 系统的高可用性和稳定性。本文将介绍 TiDB 如…
阅读更多...
媒体服务器软件BUG说明及改进方案

媒体服务器软件BUG说明及改进方案

媒体服务器软件BUG说明及改进方案 一、BUG描述二、问题分析三、改进方案四、实施计划五、预期效果六、总结一、BUG描述 在当前版本的媒体服务器中，存在一个关于静音媒体流处理的问题。具体表现为：当主叫连续发送静音帧到媒体服务器时，媒体服务器并未将这些静音帧转发给被叫…
阅读更多...
2. Python之注释及缩进以及print和input函数使用

2. Python之注释及缩进以及print和input函数使用

一. Python代码中的注释及缩进 Python中注释有单行注释&#xff0c;多行注释&#xff0c;声明注释 单行注释使用符号#&#xff0c;从#开始&#xff0c;后面到本行末尾都是注释内容。多行注释可以使用’‘’ ‘’三个引号&#xff0c;三个引号内的内容都是注释声明注释&#x…
阅读更多...
相机内存卡格式化了照片怎么恢复？格式化恢复详解

相机内存卡格式化了照片怎么恢复？格式化恢复详解

摄影爱好者们都知道&#xff0c;相机内存卡是记录我们美好瞬间的重要媒介。然而&#xff0c;在使用过程中&#xff0c;有时我们会因操作不当或设备故障&#xff0c;不小心格式化了内存卡&#xff0c;从而导致珍贵的照片丢失。面对这种情况&#xff0c;我们该如何恢复这些被格式…
阅读更多...
深入FastAPI：掌握使用多个关联模型的高级用法[Union类型]

深入FastAPI：掌握使用多个关联模型的高级用法[Union类型]

在FastAPI中&#xff0c;响应模型可以声明为Union类型&#xff0c;这允许你为同一个端点定义多种可能的响应模型。这种灵活性使得API可以根据不同的情况返回不同类型的数据结构。 例如&#xff0c;根据请求中的查询参数或数据库中的数据&#xff0c;一个API端点可能有时返回一…
阅读更多...
STM32 HAL DMA 中断碰到的问题

STM32 HAL DMA 中断碰到的问题

流程 串口收数据—>dma搬运到变量—>空闲中断----->接收完成 配置 dma中断全部去掉 串口中断开启 freertos中断全部去掉 时钟配置 代码 开启中断 // DMA 空闲检查 void receives_uaru_7(void) {RXU7 0;//清除中断标志HAL_UARTEx_ReceiveToIdle_DMA(&hua…
阅读更多...
【学习笔记11】如何找到twitter中自己的cookie?

【学习笔记11】如何找到twitter中自己的cookie?

步骤 在浏览器中打开twitter网站&#xff0c;按下CtrlShiftI(i)按下面步骤以此点击 参考 如何找到自己的Facebook XS Cookie和X/Twitter Auth_Token? 一張圖秒懂
阅读更多...
二、Maven工程的创建--JavaSEJavaEE

二、Maven工程的创建--JavaSEJavaEE

1、idea创建Maven JavaSE工程&#xff1a; 2、idea创建Maven JavaEE工程&#xff1a; &#xff08;1&#xff09;手动创建 &#xff08;2&#xff09;插件方式创建 在idea里安装插件JBLJavaToWeb&#xff1b; 选择需要生成的项目文件后&#xff0c;右击&#xff1a; 项目…
阅读更多...
【实战篇】MySQL为什么有时候会选错索引？

【实战篇】MySQL为什么有时候会选错索引？

场景分析 1 如下数据库表&#xff1a; CREATE TABLE t (id int(11) NOT NULL AUTO_INCREMENT,a int(11) DEFAULT NULL,b int(11) DEFAULT NULL,PRIMARY KEY (id),KEY a (a),KEY b (b) ) ENGINEInnoDB;然后&#xff0c;我们往表 t 中插入 10 万行记录&#xff0c;取值按整数递…
阅读更多...
那些35岁以上的产品经理都去做什么了？

那些35岁以上的产品经理都去做什么了？

前言 升成管理层的一批&#xff0c;改行去开店的一批&#xff0c;剩下来在干产品经理的也不少&#xff0c;能在35岁之后还干产品经理的&#xff0c;都是人精&#xff0c;知道适者生存&#xff0c;知道要跟着大势走。 现在的大势是啥&#xff1f;AI呀&#xff01; 我那些干了…
阅读更多...
【delphi】判断多显示器下，程序在那个显示其中

【delphi】判断多显示器下，程序在那个显示其中

在 Delphi 中&#xff0c;如果你的电脑连接了多个显示器&#xff0c;可以通过以下步骤判断某个程序在哪个显示器上运行。 方法概述&#xff1a; 获取程序窗口的位置&#xff08;例如窗体的 Left、Top 坐标&#xff09;。使用 Screen.MonitorFromWindow 函数来确定该窗口所属的…
阅读更多...
面了 5 家知名企业的NLP算法岗(大模型方向)，被问麻了。。。。。

面了 5 家知名企业的NLP算法岗(大模型方向)，被问麻了。。。。。

最近一位同学&#xff0c;给我分享了他面试 NLP 算法工程师(大模型方向)的经历与经验。直呼最近找工作太难了。。。。 今天我整理后分享给大家&#xff0c;希望对后续找工作的有所帮助。 这位同学为面试刷了 leetcode200-300 题左右&#xff0c;侧重刷中高频hard题&#xff0…
阅读更多...
图的广度优先遍历与深度优先遍历(C语言)

图的广度优先遍历与深度优先遍历(C语言)

这是结果 #include <stdio.h> #include <stdlib.h> #include <stdbool.h>#define _CRT_SECURE_NO_WARNINGS// 定义边表结点结构 typedef struct EdgeNode {int adjvex; // 邻接顶点域&#xff0c;存储该边所指向的顶点struct EdgeNode* next; // 指向下一条…
阅读更多...
最新文章

Copyright @ 2022~2023