当前位置: 首页 > news >正文

微信小程序+echart实现点亮旅游地图

背景

最近看抖音有个很火的特效就是点亮地图,去过哪些地方,于是乎自己也想做一个,结合自己之前做的以家庭为单位的小程序,可以考虑做一个家庭一起点亮地图的功能。

效果图

过程

1,首先就是得去下微信小程序适配的echarts-for-weixin,这个网上很多,就不贴链接了。

下好后把ec-canvas文件夹放在小程序文件夹中,

2,然后到echart官网下载echart.js,这里个人建议定制化下载,因为小程序有限制一个文件不能超过2M,定制化一般只有几百k,

3,去下载中国地图数据的json,去阿里云地图下载

DataV.GeoAtlas地理小工具系列

4,开始写代码

页面

#这是css代码
.container {position:absolute;top: 10rpx;bottom: 0;left: 0;right: 0;height: 800rpx;display: flex;flex-direction: column;align-items: center;} ec-canvas {width: 100%;height: 100%;padding:300rpx,0rpx,10rpx,10rpx;
}

js代码

import * as echarts from '../../ec-canvas/echarts.min';
import geoJson from './mapData.js';
#这是自己封装请求后段接口的工具类
import {HTTP} from '../../config/http.js';let http = new HTTP();
var chartMap = null;function setOption(chart,linghtData) {const option = {title: {subtext: '一起点亮地图',left: 'center',subtextStyle:{color:'#1cd9f1'}},tooltip: {show: true,trigger: 'item'},visualMap: {show: true,type: "piecewise",left: 10,bottom: "0",align: "left",itemWidth: 10,itemHeight: 10,textStyle: {fontSize: 10},pieces: [{ min: 3, label: '大家一起去过', color: '#EE30A7' },{ min: 2, max: 3, label: '两个人去过', color: '#FF00FF' },{ min: 1, max: 1, label: '一个人去过', color: '#EE799F' },{ min: 0, max: 0, label: '还没去过', color: '#FFE6BD' }]},series: [{type: 'map',mapType: 'china',label: {show: true,fontSize: 8},itemStyle: {normal: {borderColor: '#737475',areaColor: '#fff',},emphasis: {areaColor: '#389BB7',borderWidth: 0}},animation: false,data: linghtData}]};chart.setOption(option);
};Page({/*** 页面的初始数据*/data: {ecMap: {lazyLoad: true,},array:['黑龙江','吉林','湖南','辽宁','内蒙古','北京','天津','河北','山西','陕西','山东','江苏','宁夏','甘肃','河南','安徽','湖北','上海','浙江','福建','江西','台湾','广东','广西','香港','澳门','海南','南海诸岛','云南','贵州','四川','重庆','西藏','青海','新疆'],index:0,familyId:0,target:"",targetList:[],type:"",itemId:"",active:0,lightData:[],},onLoad(options) {#加载地图this.ecComponent = this.selectComponent('#mychart-dom-map');this.getMapData();
},//请求接口数据并初始化图标
getMapData() {var that = this;let familyId = wx.getStorageSync('familyId');http.request({url: '/api/target/getMapList',method:'GET',data:{"familyId": familyId},success (res) {if (res.code == 0) {that.setData({lightData: res.data,});that.initChart(res.data);}}});},// 初始化图表initChart(lightData) {this.ecComponent.init((canvas, width, height, dpr) => {chartMap = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr, });echarts.registerMap('china', geoJson);canvas.setChart(chartMap);setOption(chartMap,lightData);return chartMap;});},//这个方法就是保存数据调用后段接口后再刷新地图
targetLight() {var that = this;http.request({url: '/api/target/saveLightMap',method:'POST',data:{"familyId": familyId,"userId":userId,"province":province,},success (res) {if (res.code == 0) {//重新加载地图that.getMapData();}}});},

js实现了调用接口获得数据并初始化图标,然后用户可以选择一个省份,点击(点亮地图)按钮,实现动态刷新地图

这是小程序码,欢迎扫码使用。

相关文章:

微信小程序+echart实现点亮旅游地图

背景 最近看抖音有个很火的特效就是点亮地图,去过哪些地方,于是乎自己也想做一个,结合自己之前做的以家庭为单位的小程序,可以考虑做一个家庭一起点亮地图的功能。 效果图 过程 1,首先就是得去下微信小程序适配的ec…...

Git(8)——Git命令总结

一、简介 本篇文章将基于Git(4)——Git命令小总结,补充后续的Git使用命令 二、总结 # 添加远程连接 git remote add origin 远端地址# 推送本地代码 git push origin 分支名称# 拉取远端代码(第一次) git clone 远端克隆地址# 更新远端代码…...

9.15 滴滴笔试

T1&#xff08;二分&#xff09; #include <bits/stdc.h>#define endl \nusing namespace std;typedef long long LL;const int N 1e5 10;int n, k; int a[N];bool check(int mid) {int rec 1e9, cnt 1;for(int i 0; i < n; i ) {int j i;while(j < n &…...

有趣的设计模式——适配器模式让两脚插头也能使用三孔插板

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 场景与问题 众所周知&#xff0c;我们国家的生活用电的电压是220V而笔记本电脑、手机等电子设备的工作压没有这么高。为了使笔记本、手机等设备可以使用220V的生活用电就需…...

2.10 PE结构:重建重定位表结构

Relocation&#xff08;重定位&#xff09;是一种将程序中的一些地址修正为运行时可用的实际地址的机制。在程序编译过程中&#xff0c;由于程序中使用了各种全局变量和函数&#xff0c;这些变量和函数的地址还没有确定&#xff0c;因此它们的地址只能暂时使用一个相对地址。当…...

关于content-type的理解

一.content-type的结论 告诉后端传过去的数据是什么类型的数据 二.没有请求体 (1)没有请求体的情况下content-type没有意义。 (2):图示 里面是没有请求体的 (3)有请求体的情况 二.常见的三种方式 (1)application/x-www-form-urlencoded(默认) 参数的表现形式: 传递之前可以…...

<图像处理> 空间滤波基础二

空间滤波基础二&#xff1a;锐化 锐化的作用的突出灰度中的过渡。图像锐化通过空间微分来实现&#xff0c;微分将增强边缘和其他不连续&#xff08;噪声&#xff09;&#xff0c;不强化灰度变化缓慢的区域。图像锐化也叫做高通滤波&#xff0c;通过高频&#xff0c;抑制低频。…...

Java中的队列Queue

Queue(队列)是一种在计算机科学中常见的数据结构,它基于先进先出(FIFO)的原则,即最先进入队列的元素最先出队。在Java中,Queue是一个接口,定义了一组操作队列的方法,而具体的实现类可以选择性地实现这些方法。 以下是Queue的一些常见用途和操作: 添加元素: 使用off…...

机器学习技术(十)——决策树算法实操,基于运营商过往数据对用户离网情况进行预测

机器学习技术&#xff08;十&#xff09;——决策树算法实操 文章目录 机器学习技术&#xff08;十&#xff09;——决策树算法实操一、引言二、数据集介绍三、导入相关依赖库四、读取并查看数据1、读取数据2、查看数据 五、数据预处理1、选择数据2、数据转码 六、建模与参数优…...

大数据之-kafka学习笔记

Kafka Kafka 是一个分布式的基于发布/订阅模式的消息队列&#xff08;Message Queue&#xff09;&#xff0c;主要应用于大数据实时处理领域。 Kafka可以用作Flink应用程序的数据源。Flink可以轻松地从一个或多个Kafka主题中消费数据流。这意味着您可以使用Kafka来捕获和传输…...

虚幻动画系统概述

本文主要整理一下高层次的概述&#xff0c;方便后续查阅 1.动画流程 DCC产出动画文件 -> UE动画导入 -> 动画蓝图驱动&#xff08;类似unity的动画状态机&#xff09; ->动画后处理蓝图驱动&#xff08;例如修型骨&#xff0c;骨骼矫正等后期处理&#xff09; 2.动…...

什么是集成测试?集成测试方法有哪些?

1、基本概念&#xff1a; 将软件集成起来后进行测试。集成测试又叫子系统测试、组装测试、部件测试等。集成测试主要是针对软件高层设计进行测试&#xff0c;一般来说是以模块和子系统为单位进行测试。 2、集成测试包含的层次&#xff1a; 1. 模块内的集成&#xff0c;主要是…...

elementUI中的el-form常用校验规则

elementUI中的el-form常用校验规则: 校验使用方式&#xff1a; rules: {name: [{ required: true, message: 请输入活动名称, trigger: blur },{ min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur }],region: [{ required: true, message: 请选择活动区域, trig…...

蓝桥杯打卡Day9

文章目录 直角三角形最长平衡串 一、直角三角形IO链接 本题思路:本题就是利用欧几里得距离求解即可。 #include <bits/stdc.h>int main() {std::ios::sync_with_stdio(false);std::cin.tie(nullptr);std::cout.tie(nullptr);int T;std::cin>>T;while(T--){int x…...

C# 辗转相除法求最大公约数

辗转相除法求最大公约数 public static void CalcGCD(int largeNumber, int smallNumber, out int GCD){GCD 1;int remain -1;while (remain ! 0){remain largeNumber % smallNumber;GCD smallNumber;largeNumber smallNumber;smallNumber remain;}}...

腾讯mini项目-【指标监控服务重构】2023-08-03

今日已办 a&#xff0c;b两组的trace放到一个分支里 可以看到先前的没看到的 profile trace 的耗时&#xff0c;是由于时间跨度较长&#xff0c;没有滑动到 trace 末尾 明日待办 组长会议汇报项目进度和问题...

redis缓存穿透、击穿、雪崩介绍

缓存穿透 概念 缓存穿透指某一特定时间批量请求打进来并访问了缓存和数据库都没有的key&#xff0c;此时会直接穿透缓存直达数据库&#xff0c;从而造成数据库瞬时压力倍增导致响应速度下降甚至崩溃的风险&#xff1b; 解决方案 一、通过布隆过滤器解决 原理&#xff1a;将…...

Redis 基础总结

1、NoSQL概述 1.1 数据库分类 目前数据库分&#xff1a;关系型数据库与非关系型数据库 常用的关系型数据库&#xff1a; Oracle&#xff0c;MySQL&#xff0c;SqlServer&#xff0c;DB2 常用的非关系数据库&#xff1a;Redis&#xff0c;MongoDB&#xff0c;ElasticSearch&…...

基于nginx的tomcat负载均衡和集群(超简单)

今天看到"基于apache的tomcat负载均衡和集群配置 "这篇文章成为javaEye热点。 略看了一下&#xff0c;感觉太复杂&#xff0c;要配置的东西太多&#xff0c;因此在这里写出一种更简洁的方法。 要集群tomcat主要是解决SESSION共享的问题&#xff0c;因此我利用memcac…...

ESIM实战文本匹配

引言 今天我们来实现ESIM文本匹配&#xff0c;这是一个典型的交互型文本匹配方式&#xff0c;也是近期第一个测试集准确率超过80%的模型。 我们来看下是如何实现的。 模型架构 我们主要实现左边的ESIM网络。 从下往上看&#xff0c;分别是 输入编码层(Input Ecoding) 对前…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...