首页 > 其他分享 >通过高德JS API 实现呼吸点

通过高德JS API 实现呼吸点

时间:2024-08-07 09:24:28浏览次数:11  
标签:city assets color JS API images import 高德 png

效果图:

核心代码:

<script lang="ts" setup>
  import { onMounted, onUnmounted, ref } from 'vue';
  import AMapLoader from '@amap/amap-jsapi-loader';
  import redImage from '@/assets/images/red.png';
  import orangeImage from '@/assets/images/orange.png';
  import yellowImage from '@/assets/images/yellow.png';

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

标签:city,assets,color,JS,API,images,import,高德,png
From: https://blog.csdn.net/qq_35366269/article/details/140973466

相关文章

  • jQuery入门(五)Ajax和json
    一、Ajax简介AJAX(AsynchronousJavaScriptAndXML):异步的JavaScript和XML。本身不是一种新技术,而是多个技术综合。用于快速创建动态网页的技术。一般的网页如果需要更新内容,必需重新加载个页面。而AJAX通过浏览器与服务器进行少量数据交换,就可以使网页实现异......
  • 常用API_1:应用程序编程接口:String
    文章目录包packageString注意==和equals()String的对象是不可变的对象双引号""方式写出的字符串对象常用方法使用String来开发验证码代码运行结果反思包package同一个包下的程序可以直接访问访问其他包下的程序必须导包才能访问Java.lang包可以不用导,直接使用eg......
  • Day18_2--Vue.js Ajax(使用 Axios)基础入门学习
    Vue.js中的Ajax请求(使用Axios)什么是Axios?Axios是一个基于Promise的HTTP客户端,可以用于浏览器和Node.js环境中。它是现代化的Ajax库,用来替代传统的XMLHttpRequest。为什么选择Axios?简单易用:Axios提供了简洁且强大的API,使得发送HTTP请求变得非常简单......
  • xlsx-js-style 如何配置表格样式
    xlsx-js-style是一个用于处理Excel文件的JavaScript库,基于xlsx库并添加了对样式的支持。通过xlsx-js-style,你可以设置单元格的字体、背景、边框等样式。下面是如何使用xlsx-js-style库配置表格样式的步骤。1.安装库首先,确保你已经安装了xlsx-js-style库:npminstal......
  • 【Material-UI】按钮组件中的实验性API:Loading按钮详解
    文章目录一、LoadingButton组件概述1.组件介绍2.基本用法二、LoadingButton组件的高级用法1.自定义加载指示器2.图标与加载位置三、已知问题与解决方法1.Chrome翻译工具与LoadingButton的兼容性问题四、实用性与未来展望1.应用场景2.未来展望五、总结......
  • TMDOG的微服务之路_04——Nest.js 的异常筛选器
    TMDOG的微服务之路_04——Nest.js的异常筛选器博客地址:TMDOG的博客在上一篇博客中,我们实现了一个简易的用户管理API并添加了中间件功能。本篇博客,我们将探讨如何在Nest.js中使用异常筛选器。可以帮助我们更好地处理异常。异常筛选器1.创建异常筛选器异常筛选器用......
  • jsoncpp库的简易引入教程
    1.打开github上项目的主页jsoncpp2.clone到本地gitclonehttps://github.com/open-source-parsers/jsoncpp.git3.生成jsoncpp库的头文件以及源文件进入项目目录![[Pastedimage20240510150641.png]]执行Python命令,pythonamalgamate.py![[Pastedimage20240510150......
  • SolidJS-forceDirectedGraph(2)
    使用solidJS实现力导向图力导向图参考:https://segmentfault.com/a/1190000016384506力算法代码:/***@desc力算法*/functionforce(data,ctx,size){const{nodes,links}=data;//需要参数constmaxInterval=300;//平衡位置间距cons......
  • 原生js与微信小程序 控制<video>标签 视频播放倍率
    最近公司小程序有个需求要求里面的视频可以让用户控制播放的倍率需求很简单但是要注意在不同终端上写法可能有些许区别这里大家主要关注js的部分原生jshtml部分<divid="box"><videoid="myVideo"style="width:100%;"controlssrc="https://cdrbonlinecour......
  • JS历理 foot.js的部分功能
    document.writeln("<divid=\'outerdiv\'style=\'position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;\'>");document.writeln("<divid=\'innerdiv\'s......