vue中百度地图的图形绘制

最新推荐文章于 2024-07-18 18:32:19 发布

kleinBlue.

最新推荐文章于 2024-07-18 18:32:19 发布

阅读量1.3k

点赞数 2

分类专栏：百度地图文章标签：百度 css html

本文链接：https://blog.csdn.net/qq_43299703/article/details/120486552

版权

本文介绍了在Vue应用中如何利用MVVM特性，结合百度地图API进行图形绘制，特别是展示了如何绘制折线的方法。

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

说明

由于 MVVM 数据驱动视图的特性，地图中的图形绘制不再需要使用 BMapLib.DrawingManager 等第三方工具库来实现。

示例

绘制折线

代码

<baidu-map class="map"
  :center="{lng: 116.404, lat: 39.915}"
  :zoom="14"
  @mousemove="syncPolyline"
  @click="paintPolyline"
  @rightclick="newPolyline">
  <bm-control>
    <button @click="toggle('polyline')">{
  { polyline.editing ? '停止绘制' : '开始绘制' }}</button>
  </bm-control>
  <bm-polyline :path="path" v-for="path of polyline.paths"></bm-polyline>
</baidu-map>

<script>
export default {
  data () {
    return {
      polyline: {
        editing: false,
        paths: []
      }
    }
  },
  methods: {
    toggle (name) {
      this[name].editing = !this[name].editing
    },
    syncPol