【vue-baidu-map】绘制折线（带方向箭头）

原创

已于 2023-03-16 15:59:18 修改 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-16 15:42:15 首次发布

该文章展示了如何在Vue.js应用中集成BaiduMap，创建标记图标并绘制折线。通过定义`<baidu-map>`组件，设置地图中心、缩放级别以及添加图标和折线功能。同时，文章提供了自定义组件`new-polyline`来处理路径和图标序列，确保地图元素的动态更新和交互。

主文件代码

<template>
  <div class="container">
    <baidu-map style="width: 100%;height: 100vh;"
               :center="center" :zoom="zoom" @ready="handler"
               :scroll-wheel-zoom="true" :mapClick="false"
               @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
      <!-- 图标 -->
      <bm-marker v-for="item in maps" :key="item.id"
                 :position="{lng: item.longitude, lat: item.latitude}"
                 :icon="{url: require('@/assets/images/location.png'), size: {width: 40, height: 40}}"
      >
      </bm-marker>
      <!-- 箭头折线 -->
      <new-polyline
        v-if="points && points.length >= 2 && checkPoints({ points })"
        :path="points"
        :icons="icons"
        stroke-color="#0091ea"
        :stroke-opacity="0.8"
        :stroke-weight="10"
      ></new-polyline>
    </baidu-map>
  </div>
</template>
<script>
import newPolyline from "./new_polyline";

export default {
  components: {
    newPolyline
  },
  data() {
    return {
      center: {
        lng: 0,
        lat: 0
      },
      map: "", // 地图
      maps: [], // 站点信息数组
      nowStationId: '',
      timeId: "", //循环
      zoom: 13,
      co