绘制路线轨迹，设置标记

小趴菜呢

已于 2022-11-10 11:09:50 修改

阅读量334

点赞数

分类专栏： echarts vue 文章标签： echarts 前端 javascript

于 2022-11-10 10:59:20 首次发布

本文链接：https://blog.csdn.net/weixin_45442630/article/details/127769759

版权

本文介绍了如何利用Echarts在前端进行地图轨迹的绘制。首先，通过引用Echarts的官方例子并在main.js中全局引入Echarts来开始。此外，还提及了使用高德地图的可能性，虽然例子尚未完成，但可以预期实现类似的效果。在纯色背景上查看，能更清晰地展示绘制的轨迹。

摘要由CSDN通过智能技术生成

1、使用echarts
echarts官网例子
记得在main.js中全局引入echarts；

<script>
import mapSvg from "@/assets/images/map.svg"; //引入svg图片
import axios from "axios";
export default {
   
 methosd:{
   
    init(){
   
         //svg设置自己的底图
        axios(mapSvg).then((res) => {
   
         this.$echarts.registerMap("map", {
   
          svg: res.data,
        });
        //option配置
        let option = {
   
          tooltip: {
   
            trigger: "item",
            triggerOn: "click",
            enterable: true,
            formatter: (val) => {
   
              //设置点位的click事件
            },
          },
          geo: {
   
            map: "map",
            center:[450,450],//设置中心点
            left: 0, //设置地图左边的位置
            top: 0, //设置地图上边的位置
            right: 0, //设置地图右边的位置
            bottom: 0, //设置地图底部的位置
            aspectScale: 0.9,//设置长宽比
            zoom: 1.7,//设置默认显示比例
            scaleLimit