首页 > 其他分享 >通过Vue3+高德地图的JS API实现市区地图渲染

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

时间:2024-06-15 17:28:55浏览次数:8  
标签:city icons color svg 地图 JS map API import

效果图:

核心代码:

<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&#

标签:city,icons,color,svg,地图,JS,map,API,import
From: https://blog.csdn.net/qq_35366269/article/details/139694207

相关文章

  • Day.js日期时间的常计算
    Day.js日期时间的常计算1、介绍Day.js:Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。主要为操作时间日期的库。2、场景使用计算周几、当月第一天计算xx天前/后的日期将时间戳转换为日期(YYYY-MM-DD)计算月天数获取两个日期的时间差3、使用例......
  • 支付宝spi接口设计验签和返回结果加签注意点,支付宝使用JSONObject对象
    支付宝spi接口设计验签和返回结果加签注意点,支付宝使用JSONObject对象SPI三方服务接入指南https://opendocs.alipay.com/isv/spiforisv服务端实现Demo以下Demo是通过Java实现的SPI服务样例,包括验签支付宝请求报文、业务逻辑处理、商家加签以及响应报文构造的逻辑。......
  • 支付宝签名和验签使用JSONObject是最优解。json字符串顺序和==符号都一致演示代码
    支付宝签名和验签使用JSONObject是最优解。json字符串顺序和==符号都一致演示代码支付宝spi接口设计验签和返回结果加签注意点,支付宝使用JSONObject对象https://www.cnblogs.com/oktokeep/p/18249346packagecom.example.core.mydemo;importcom.alibaba.fastjson.JSON;imp......
  • Flink API
    Flink中的API#Flink为流式/批式处理应用程序的开发提供了不同级别的抽象。ProgramminglevelsofabstractionFlinkAPI最底层的抽象为有状态实时流处理。其抽象实现是ProcessFunction,并且ProcessFunction被Flink框架集成到了DataStreamAPI中来为我们使用。它允......
  • 理解JSP底层
    importjava.net.URLDecoder;publicclasslogin_jsp{//JSP的9大内置对象privateJSPWriterout;//当前JSP输出流对象privateHttpServletRequestrequest;//请求对象privateHttpServletResponseresponse;//响应对象privateHttpSession......
  • 认识与学习JSP
    JSP核心技术什么是JSPJSP全称是JavaServerPages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术。JSP/Servlet规范。JSP实际上就是ServletJSP这门技术的最大的特点在于,写jsp就像在写html,但它相比html而言,html只能为用户提供静态数据,而Jsp技术允许在页......
  • docker 部署three.js
    安装docker没有daemon.json文件检查daemon.json文件是否存在$ls/etc/docker创建一个新的daemon.json文件$sudotouch/etc/docker/daemon.json在daemon.json文件中添加配置项{"registry-mirrors":["https://pee6w651.mirror.aliyuncs.com","https://regist......
  • 基于JSP技术的定西扶贫惠农推介系统
    开头语:你好呀,我是计算机学长猫哥!如果有相关需求,文末可以找到我的联系方式。开发语言:JSP数据库:MySQL技术:B/S架构、JSP技术工具:Eclipse、MySQL、Tomcat系统展示首页管理员功能模块用户管理界面在线捐赠管理摘要扶贫工作是党中央、国务院的重要战略部署,对于推......
  • 基于java jsp ssm的基于JavaEE的服饰服装销售商城网站的设计与实现(源码+LW+部署讲解)
    前言......
  • 基于java jsp ssm的基于Java Web的智慧社区信息平台的设计与实现(源码+LW+部署讲解)
    前言......