通过Vue3+高德地图的JS API实现市区地图渲染

效果图:

核心代码:

<script setup>
  import { onMounted, onUnmounted } from 'vue';
  import AMapLoader from '@amap/amap-jsapi-loader';
  import { message } from 'ant-design-vue';
  import school from '@/assets/icons/school.svg';
  import enterprise from '@/assets/icons/enterprise.svg';


  let map = null;
  let map_opt = [
    {
      city: '西陵区',
      color: '#0BACFF',
    },
    {
      city: '伍家岗区',
      color: '#FFE720',
    },
    {
      city: '夷陵区',
      color: '#502954',
    },
    {
      city: '猇亭区',
      color: '#1AB361',
    },
    {
      city: '兴山县',
      color: '#5251D0',
    },
    {
      city: '秭归县',
      color: '#E3D79D&#

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

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

相关文章

pytest + yaml 框架 -61.jenkins+allure+钉钉通知添加测试结果

前言 上一篇pytest + yaml 框架 -60.git+jenkins+allure+钉钉通知反馈 已经实现测试结果用钉钉通知。 本篇继续在钉钉通知里添加测试的汇总结果,此功能在pytest-yaml-yoyo v1.5.2版本上实现。 Environment Injector 插件 在运行完用例后会生成一个summary.json 文件,汇总…

JAVA小知识20:万字详解List与ArrayList

一、集合简介 1.1、什么是集合&#xff1f; 可同时存储多个元素的数据结构就是集合。 1.2、为什么要有集合&#xff1f; 我们可以使用数组同时存储多个元素&#xff0c;但是数组有个弊端。数组创建之后长度就会固定&#xff0c;如需扩容则需要手动扩容&#xff0c;我们需要…

【计算机视觉】人脸算法之图像处理基础知识(四)

图像的几何变换 图像的几何变换是指在不改变图像内容的前提下对图像的像素进行空间几何变换。主要包括图像的平移变换、镜像变换、缩放和旋转等。 1.插值算法 插值通常用来放缩图像大小&#xff0c;在图像处理中常见的插值算法有最邻近插值法、双线性插值法、二次立方、三次…

中小制造业工厂要不要上MES系统

MES系统的主要功能包括制造数据管理、计划排产管理、生产调度管理、库存管理、质量管理、人力资源管理、工作中心/设备管理、工具工装管理、采购管理、成本管理、项目看板管理、生产过程控制、底层数据集成分析、上层数据集成分解等。通过这些模块&#xff0c;MES为企业打造一个…

【网络安全学习】使用Kali做渗透情报收集-01-<域名信息主机信息>

1.收集开源情报 开源情报(Open Source Intelligence&#xff0c;OSINT)是指从各种公开的渠道中寻找和获取有价值的信息 如&#xff1a;互联网、媒体、社交网络、公共数据库等开源情报具有以下特点&#xff1a; - 丰富性&#xff1a;开源情报涵盖了各种类型和领域的信息 - 可…

【学习】什么样的软件测试项目适合做自动化测试

随着科技的发展和社会的进步, 软件行业也在不断地壮大和发展。在这个过程中&#xff0c;软件测试变得越来越重要&#xff0c;并且成为了保证软件质量的关键环节。而自动化测试作为软件测试的一种方法&#xff0c;在提高测试效率、降低人力成本等方面具有显著的优势。那么什么样…

SpringBoot集成mqtt上下线提醒功能设计

目录 1.首先安装emqx&#xff0c;去官网下载emqx压缩包&#xff0c;并且解压。 2.使用emqx start 命令启动emqx后台管理 3.下载mqttx调试工具&#xff0c;使用mqttx调试mqtt连接。下载地址:MQTTX下载-MQTTX官方版下载,下载完成直接打开&#xff0c;便可进行mqtt连接调试 4.…

超详解——Python 字典详解——小白篇

目录 1. 创建字典 示例&#xff1a; 2. 访问字典中的元素 示例&#xff1a; 3. 修改字典元素 示例&#xff1a; 4. 删除字典元素 示例&#xff1a; 5. 查找元素是否是字典的键 示例&#xff1a; 6. 标准类型操作符 获取字典长度 合并两个字典 7. 常用内置函数 k…

el-table表头修改文字或者背景颜色,通过header-row-style设置样式

方式一 <el-table :header-cell-style"{text-align: center}" />方式二 <template><el-table :header-cell-style"tableHeaderColor" /> </template> <script> export default {methods: {tableHeaderColor ({row, column…

socket收发数据的处理

1. TCP 协议是一种基于数据流的协议 Socket的Receive方法只是把接收缓冲区的数据提取出来,当系统的接收缓冲区为空,Receive方法会被阻塞,直到里面有数据。 Socket的Send方法只是把数据写入到发送缓冲区里,具体的发送过程由操作系统负责。当操作系统的发送缓冲区满了,Send方法会…

基于springboot的大学计算机基础网络教学系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于springboot的大学计算机基础网络教学…

【Pycharm】设置双击打开文件

概要 习惯真可怕。很多小伙伴用习惯了VsCode开发&#xff0c;或者其他一些开发工具&#xff0c;然后某些开发工具是单击目录文件就能打开预览的&#xff0c;而换到pycharm后&#xff0c;发现目录是双击才能打开预览&#xff0c;那么这个用起来就特别不习惯。 解决办法 只需一…

代码随想录-Day31

455. 分发饼干 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff0c;都…

swiftui中使用icon图标时,让中间部分不透明显示

在使用了Image(systemName: "plus.circle.fill")这个视图组件后&#xff0c;发现中间的加号竟然是透明的&#xff0c;但是我们想要的是不让它透明&#xff0c;该怎么做呢&#xff1f; 最简单的方式就是给这个图片设置一个白色的背景是不是就好了&#xff1f;我们可以…

Apple - Cocoa Text Architecture Guide

翻译整理自&#xff1a;Cocoa Text Architecture Guide https://developer.apple.com/library/archive/documentation/TextFonts/Conceptual/CocoaTextArchitecture/Introduction/Introduction.html#//apple_ref/doc/uid/TP40009459 文章目录 一、关于 Cocoa 文本系统1、概览大…

web端即时通信技术

web端即时通信技术 对于IM/消息推送这类即时通讯系统而言&#xff0c;系统的关键就是“实时通信”能力。所谓实时通信有以下两层含义 客户端可以主动向服务端发送信息。 当服务端内容发生变化时&#xff0c;服务端可以实时通知客户端。 HTTP局限 Http是客户端/服务器模式中…

AI实践与学习6-RAG流程优化学习

背景 RAG流程很多细节优化点&#xff0c;助力AIGC。 内容 LangChain在RAG功能上的一些能力 多路向量检索 多向量检索器的核心想法是将我们想要用于答案合成的文档与我们想要用于检索的参考文献分开。这允许系统为搜索优化文档的版本&#xff08;例如&#xff0c;摘要&…

LeetCode | 709.转换成小写字母

这道题可以用api也可以自己实现&#xff0c;都不难&#xff0c;大小字母之前相差了32&#xff0c;检查到大写字母时加上32即可 class Solution(object):def toLowerCase(self, s):""":type s: str:rtype: str"""return s.lower()class Solution…

笨蛋学算法之LeetCodeHot100_5_三数之和(Java)

package com.lsy.leetcodehot100;import java.util.ArrayList; import java.util.Arrays; import java.util.List;public class _Hot6_三数之和 {public static List<List<Integer>> threeSum(int[] nums) {//先排序数组Arrays.sort(nums);//存放结果集List<Lis…

QShop商城-短信通知配置

QShop商城-短信通知配置 本系统短信通知配置可选阿里云/腾讯云,二者二选一即可. 阿里云短信 一、登录阿里云短信平台 阿里云短信平台管理地址&#xff1a;https://dysms.console.aliyun.com/dysms.html 二、账户ID和秘钥&#xff08;AccessKeyId 和 AccessKeySecret&#x…