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

这篇具有很好参考价值的文章主要介绍了微信小程序+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实现了调用接口获得数据并初始化图标,然后用户可以选择一个省份,点击(点亮地图)按钮,实现动态刷新地图

小程序 点亮地图 线路,微信小程序,旅游

这是小程序码,欢迎扫码使用。文章来源地址https://www.toymoban.com/news/detail-782640.html

到了这里,关于微信小程序+echart实现点亮旅游地图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序毕业设计作品成品(24)微信小程序景区景点旅游攻略系统设计与实现

    博主介绍 :《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(46)
  • 微信小程序毕业设计作品成品(61)微信小程序旅游景区售票购票系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(41)
  • 高德地图实现-微信小程序地图导航

    1、在高德开放平台注册成为开发者 2、申请开发者密钥(key)。 3、下载并解压高德地图微信小程序SDK 注册账号(https://lbs.amap.com/)) 申请小程序应用的 key 应用管理(https://console.amap.com/dev/key/app)) - 我的应用 - 创建新应用 生成的 key 即可用在程序中 下载相关 sdk 文件,导入 amap-

    2024年02月08日
    浏览(71)
  • 微信小程序|智慧乡村旅游服务平台的设计与实现

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年04月08日
    浏览(42)
  • 基于微信小程序的旅游系统设计与实现(毕业论文)

    【下载】基于微信小程序的旅游系统设计与实现.docx 基于微信小程序的旅游系统设计与实现  Design and Implementation of a Tourism System Based on WeChat Mini Program 目录 2 摘要 3 3 第一章 绪论 3 1.1 研究背景与意义 3 1.2 国内外研究现状 4 1.3 研究内容与目标 5 1.4 研究方法与技术路线

    2024年02月08日
    浏览(59)
  • 基于PHP微信小程序旅游攻略和点评系统设计与实现

    开发概要 开发操作系统:windows10 + 4G内存 + 500G 小程序开发:微信开发者工具(MINA框架) 后台环境:IIS +PHP 后台开发语言:PHP 后台开发工具:Dreamweaver +PhpStorm 数据库:mysql8 数据库管理工具:navicat 其他开发语言:html + css +javascript

    2024年02月11日
    浏览(42)
  • Java基于微信小程序的乡村旅游平台设计与实现

    💗博主介绍:✌全网粉丝10W+,CSDN全栈领域优质创作者,博客之星、掘金/华为云/阿里云等平台优质作者。 👇🏻 精彩专栏 推荐订阅👇🏻 计算机毕业设计精品项目案例(持续更新) 🌟 文末获取源码+数据库+文档 🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及

    2024年02月03日
    浏览(41)
  • 微信小程序实现地图定位

    前言 地图定位这个功能相信大家在学习插件的时候都有过接触,那么在这篇文章中我来为大家介绍微信小程序中的地图定位功能,很简单哦 在此之前我们可以先去微信官方文档小程序组件地图进行了解 点此进入小程序中map介绍 map组件提供了地图展示、交互、叠加点线面及文

    2024年02月01日
    浏览(57)
  • 基于微信小程序的旅游景点预约评价系统设计与实现

    💗博主介绍:✌全网粉丝10W+,CSDN全栈领域优质创作者,博客之星、掘金/华为云/阿里云等平台优质作者。 👇🏻 精彩专栏 推荐订阅👇🏻 计算机毕业设计精品项目案例-200套 🌟 文末获取源码+数据库+文档 🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编

    2024年02月02日
    浏览(47)
  • 微信小程序实现地图路线规划

    1、获取用户地理位置: 使用 wx.getLocation API 获取用户当前的经纬度坐标。 2、 选择终点位置: 选择你要显示路线的终点经纬度坐标。 3、 使用地图组件: 在小程序页面中使用 map 组件,设置 markers 属性显示起点和终点。 4、 显示路线: 通过 polyline 属性可以显示路线。在上述

    2024年04月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包