vue-baidu-map顺序点位和折线

最新推荐文章于 2024-05-17 10:05:27 发布

Fate996

最新推荐文章于 2024-05-17 10:05:27 发布

阅读量375

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47783491/article/details/125555025

版权

1 实现效果

在这里插入图片描述

2 实现代码

<template>
    <div class="app-container">
        <baidu-map class="map-view" :center="center" :zoom="18" @ready="handler" style="height:800px">
            <bm-label v-for="(v,k) in points" :key="k" :content="v.number" :position="{lng: v.lng, lat: v.lat}" :labelStyle="style" :offset="{width: -15, height: -15}"  title="测试"/>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-polyline :path="points" stroke-color="#F25C05" :stroke-opacity="0.7" :stroke-weight="5"  ></bm-polyline>
        </baidu-map>
    </div>
</template>
<script>
export default {
  data () {
    return {
      center: { lng: 118.804341, lat: 31.975024 },
      points: [],
      style: {
        border: 'none',
        color: 'white',
        FontWeight: '700',
        backgroundColor: '#F25C05',
        fontSize: '15px',
        borderRadius: '100px',
        height: '30px',
        width: '30px',
        border: '2px solid white',
         textAlign:'center',
         lineHeight: '24px'
      }
    }
  },
  methods: {
    handler ({ BMap, map }) {
 
      this.points = [
        { lng: 118.804341, lat: 31.975024, number: '1' },
        { lng: 118.798489, lat: 31.976661, number: '2' },
        { lng: 118.796387, lat: 31.975543, number: '3' },
        { lng: 118.798075, lat: 31.968651, number: '4' }
      ]
    },
  }
}
</script>