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

RubyLinT

于 2019-08-03 08:36:59 发布

阅读量904

点赞数

分类专栏： vue 文章标签： vue vue-baidu-map 百度地图

本文链接：https://blog.youkuaiyun.com/RubyLinT/article/details/98303154

版权

vue 专栏收录该内容

33 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>