背景

最近看抖音有個很火的特效就是點亮地圖，去過哪些地方，于是乎自己也想做一個，結(jié)合自己之前做的以家庭為單位的小程序，可以考慮做一個家庭一起點亮地圖的功能。

效果圖

過程

1，首先就是得去下微信小程序適配的echarts-for-weixin，這個網(wǎng)上很多，就不貼鏈接了。

下好后把ec-canvas文件夾放在小程序文件夾中，

2，然后到echart官網(wǎng)下載echart.js，這里個人建議定制化下載，因為小程序有限制一個文件不能超過2M，定制化一般只有幾百k,

3，去下載中國地圖數(shù)據(jù)的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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    ecMap: {
      lazyLoad: true,
    },
    
    array:['黑龍江','吉林','湖南','遼寧','內(nèi)蒙古','北京','天津','河北','山西','陜西','山東','江蘇','寧夏','甘肅','河南','安徽','湖北','上海','浙江','福建','江西','臺灣','廣東','廣西','香港','澳門','海南','南海諸島','云南','貴州','四川','重慶','西藏','青海','新疆'],
    index:0,
    familyId:0,
    target:"",
    targetList:[],
    type:"",
    itemId:"",
    active:0,
    lightData:[],
  },



onLoad(options) {

#加載地圖
    this.ecComponent = this.selectComponent('#mychart-dom-map');
    this.getMapData();
},


//請求接口數(shù)據(jù)并初始化圖標
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;
    });
  },



//這個方法就是保存數(shù)據(jù)調(diào)用后段接口后再刷新地圖
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實現(xiàn)了調(diào)用接口獲得數(shù)據(jù)并初始化圖標，然后用戶可以選擇一個省份，點擊（點亮地圖）按鈕，實現(xiàn)動態(tài)刷新地圖

這是小程序碼，歡迎掃碼使用。文章來源地址http://www.zghlxwxcb.cn/news/detail-782640.html

到了這里，關(guān)于微信小程序+echart實現(xiàn)點亮旅游地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！