Vue使用高德地图折线图+marker+信息窗体+圆点+文本显示做行动轨迹效果

1.使用高德地图不多说登陆高德开发平台登陆自己账号申请一个key 然后在你的public下的index.html引入高德链接就可使用高德Api了2.首先我先放一张我需要做的UI效果图把我这个主要就是要做一个人去过那些地方然后在那些地方停留了需要我在地图上展示出来的一个简单效果！看到这里如果同你想要的效果差不多那恭喜你可以继续看下去了我会在文章最后加入全部代码！**3.**使用高德地

杨杨杨某人

3381人浏览 · 2020-10-22 14:32:26

杨杨杨某人 · 2020-10-22 14:32:26 发布

1. 使用高德地图不多说登陆高德开发平台登陆自己账号申请一个key 然后在你的public下的index.html引入高德链接就可使用高德Api了在这里插入图片描述
2. 首先我先放一张我需要做的UI效果图把
我这个主要就是要做一个人去过那些地方然后在那些地方停留了需要我在地图上展示出来的一个简单效果！看到这里如果同你想要的效果差不多那恭喜你可以继续看下去了我会在文章最后加入全部代码！

**3.**使用高德地图第一步需要盒子装这个地图这个直接截图快速跳过把在这里插入图片描述

3-1 实现UI效果分析：以上图看来我们需要折线的效果和文本效果还有就是圆点效果和marker(图标)+信息窗体的效果其实这里不需要marker效果只是我还没拆分它

3-2 下面我们就可以开始操作了操作之前对新同学或许有个疑问就是这些东西我怎么把他们组合起来呢答案很简单都用一遍就好了你只要记住在地图上操作的效果都需要经纬度去精确定位无论是折线或者说圆点什么的你们用同样的经纬度拼凑起来那么效果就出来了！

3-3 第一步我们需要一个写一个方法然后在mounted里面去调用它这里有一个问题就是首先我这个页面是一个模态框不知道是不是因为是模态框的问题应该是dom挂载完毕了地图还没加载出来的问题不设置一个定时器的话地图不会展示出来如下
在这里插入图片描述

第二步我们就开始进入正题首先我们需要先在地图上画图折线效果
在这里插入图片描述

 var map = new AMap.Map("mapBox", {
        center: [116.395577, 39.892257], //地图开始展示的中心点
        zoom: 14, // 缩放层级
      });
      // 折线图
      // 创建折线实例
      var polyline = new AMap.Polyline({
        path: this.polylineData,
        borderWeight: 2, // 线条宽度，默认为 1
        strokeColor: "#138DFF", // 线条颜色
        lineJoin: "round", //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
        lineCap: "square", //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
        zIndex: 50,
      });
      // 将折线添加至地图实例
      // 显示一条已创建的 polyline
      // polyline.show();
      map.add(polyline);

现在我的地图上就有了折线图的效果如下
在这里插入图片描述

折线图的效果有了我们继续看图我们需要在每个拐角的地方加上圆点然后我们就可以找到高德地图加圆点的Api 因为是多个地方需要加上圆点我们只有用循环把我们的经纬度循环出来添加 如下
在这里插入图片描述

// 给折线图添加圆点
      for (var i = 0; i < this.capitals.length; i += 1) {
        var center = this.capitals[i].center;
        var circleMarker = new AMap.CircleMarker({
          center: center,
          radius: 18, //3D视图下，CircleMarker半径不要超过64px 大小
          // strokeColor: "white", // 边框颜色
          strokeWeight: 2,
          // strokeOpacity: 0.5,
          fillColor: "#535455", // 背景色
          fillOpacity: 1, //透明度
          zIndex: 10,
          bubble: true,
          cursor: "pointer",
          clickable: false,
        });
        circleMarker.setMap(map);
      }

现在我地图上拐点的地方都被我加上的圆点效果 如下
在这里插入图片描述
圆点效果有了我们还需要文本标记效果 当然文本标记效果也是需要多个地方添加所以也需要循环

 // 每个圆点添加文本
      for (var i = 0; i < this.capitals.length; i += 1) {
        var text = new AMap.Text({
          text: i + 1,
          anchor: "center", // 设置文本标记锚点
          // draggable: true, // 是否可移动文本
          cursor: "pointer",
          angle: 10,
          style: {
            // padding: ".75rem 1.25rem",
            // "margin-bottom": "1rem",
            // "border-radius": ".25rem",
            "margin-top": "2px",
            "background-color": "#535455",
            opacity: "1",
            // width: "100%",
            "border-width": 0,
            // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
            "text-align": "center",
            "font-size": "14px",
            color: "#fff",
          },
          position: [this.capitals[i].center[0], this.capitals[i].center[1]],
        });
        text.setMap(map);
      }

做完这三步我们来看一下效果如下
在这里插入图片描述

现在呢就差给每个圆点添加点击事件以此来展示对应的不同信息这里需要注意的是高德官方提供是多信息窗体效果是自带了icon也就是Marker图标的我们暂时不需要这个图标我这里还没做更改大家可以自行研究我这边有一个巧计就是Marker是自定义图标可以改成跟圆点效果一样的图标覆盖上去具体怎么改可以看我上一个博客我先贴上代码如下
在这里插入图片描述

 // 每个圆点添加信息窗体
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      for (var i = 0, marker; i < this.capitals.length; i++) {
        var marker = new AMap.Marker({
          position: this.capitals[i].center,
          map: map,
        });
        // marker.content = "我是第" + (i + 1) + "个Marker";
        marker.content = `xxxxx酒店   2020.1.2 1${i + 1}：00：0${i + 1}`;
        marker.on("click", markerClick);
        marker.emit("click", { target: marker });
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();

你可以根据自己的项目UI图进行修改大致实现这个效果的思路就是这样最后我们来看一下总的效果如下
在这里插入图片描述
最后贴一下总代码也可以自行拆分

 mapFunc() {
      var map = new AMap.Map("mapBox", {
        center: [116.395577, 39.892257], //地图开始展示的中心点
        zoom: 14, // 缩放层级
      });
      // 折线图
      // 创建折线实例
      var polyline = new AMap.Polyline({
        path: this.polylineData,
        borderWeight: 2, // 线条宽度，默认为 1
        strokeColor: "#138DFF", // 线条颜色
        lineJoin: "round", //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
        lineCap: "square", //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
        zIndex: 50,
      });
      // 将折线添加至地图实例
      // 显示一条已创建的 polyline
      // polyline.show();
      map.add(polyline);

      // 给折线图添加圆点
      for (var i = 0; i < this.capitals.length; i += 1) {
        var center = this.capitals[i].center;
        var circleMarker = new AMap.CircleMarker({
          center: center,
          radius: 18, //3D视图下，CircleMarker半径不要超过64px 大小
          // strokeColor: "white", // 边框颜色
          strokeWeight: 2,
          // strokeOpacity: 0.5,
          fillColor: "#535455", // 背景色
          fillOpacity: 1, //透明度
          zIndex: 10,
          bubble: true,
          cursor: "pointer",
          clickable: false,
        });
        circleMarker.setMap(map);
      }

      // 每个圆点添加文本
      for (var i = 0; i < this.capitals.length; i += 1) {
        var text = new AMap.Text({
          text: i + 1,
          anchor: "center", // 设置文本标记锚点
          // draggable: true, // 是否可移动文本
          cursor: "pointer",
          angle: 10,
          style: {
            // padding: ".75rem 1.25rem",
            // "margin-bottom": "1rem",
            // "border-radius": ".25rem",
            "margin-top": "2px",
            "background-color": "#535455",
            opacity: "1",
            // width: "100%",
            "border-width": 0,
            // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
            "text-align": "center",
            "font-size": "14px",
            color: "#fff",
          },
          position: [this.capitals[i].center[0], this.capitals[i].center[1]],
        });
        text.setMap(map);
      }

      // 每个圆点添加信息窗体
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      for (var i = 0, marker; i < this.capitals.length; i++) {
        var marker = new AMap.Marker({
          position: this.capitals[i].center,
          map: map,
        });
        // marker.content = "我是第" + (i + 1) + "个Marker";
        marker.content = `xxxxx酒店   2020.1.2 1${i + 1}：00：0${i + 1}`;
        marker.on("click", markerClick);
        marker.emit("click", { target: marker });
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
    },

最后在vue生命周期mounted调用一下这个方法就好

 mounted() {
    setTimeout(() => {
      this.mapFunc();
    }, 0);
  },

如果看完有什么我表达不清楚的可以私聊或者留言告诉我我尽我所能为你解答！！！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^