微信小程序-echarts構建中國地圖&經緯座標轉換px座標

先獻上小程序代碼片段：https://developers.weixin.qq.com/s/2ps1k5mc7Tg3

希望有更多的同學可以互相交流 好與不好 多多評論 

展示圖：

必要文件：

結構：

<view class="box">
      <ec-canvas style='width:100%;height:100%;' id="mychart-dom-area" canvas-id="mychart-area" ec="{{ map_container }}"></ec-canvas>
      <view class="view" style="top:{{top}}px;left:{{left}}px;"></view>
</view>

css：

.box{width:700rpx;height:500rpx;background-color:#5f9ea0;margin:200rpx auto;position:relative}
.view{width:10rpx;height:10rpx;background:red;border-radius: 50%;position: absolute;}

js：

const app = getApp()
import * as echarts from "../ec-canvas/echarts"; //引入echarts封裝好的插件 可以自己到官網自定義
import geoJson2 from "../ec-canvas/china.geo.js"; //引入中國地圖
let chartLet = null, chartLetFlag = false;//初始化
function map_initChart(canvas, width, height) {
    let option = {
        geo: [{
            map: "china",
            height: height,
            width: width,
            left: 0,
            top: 0,
            roam: false,
            silent: true,
            itemStyle: {
                normal: {
                    areaColor: "#fff",
                    borderWidth: 1,
                    opacity: 0.5
                }
            },
            label: {
                normal: {
                    show: false
                }
            }
        }]
    };
    let chart = echarts.init(canvas, null, {
        width: width,
        height: height
    });
    canvas.setChart(chart);
    echarts.registerMap("china", geoJson2);
    chart.setOption(option, true);
    chartLet = chart;
    chartLetFlag = true;
    return chart;
}
Page({
    data: {
        
        map_container: {//用於構建地圖
            onInit: map_initChart, // 用戶位置對象
        },
        top:0,
        left:0
    },
    onLoad: function () {
        setTimeout(() => {
            // convertToPixel：這個方法是獲取經緯座標轉換當前頁面的 XY像素位置
            let log = chartLet.convertToPixel({ geoIndex: 0 }, [
                116.40,//經度
                39.90//緯度
            ]);
            console.log(log)
            this.setData({
                top:log[1],
                left:log[0]
            })
        }, 3000)

    },
})