先献上小程序代码片段: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)
},
})