使用vue-baidu-map百度地图实现双向绑定

最新推荐文章于 2024-02-06 08:30:00 发布

原创最新推荐文章于 2024-02-06 08:30:00 发布 · 921 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-baidu-map #百度地图

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用Vue.js框架集成百度地图组件，通过实时同步地图中心点坐标和缩放级别，实现交互式地图应用。文章详细展示了如何在Vue项目中引入并配置百度地图，以及如何监听地图事件进行状态同步。

<template>
  <div style="height:100%">
    <input v-model.number="center.lng">
    <input v-model.number="center.lat">
    <input v-model.number="zoom">
    <baidu-map 
        class="map"
        :scroll-wheel-zoom="true"
        :center="center"
        :zoom="zoom"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom">
    </baidu-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15
    }
  },
  methods: {
     syncCenterAndZoom (e) {
      const {lng, lat} = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    }
  }
}
</script>
<style lang="scss" scoped>
.map{
    height:80%;
}
</style>