vue实现百度地图坐标与input框地址的双向绑定（点击地图改变标注位置且具体位置显示在input框或input框中输入地址失去焦点后能在地图中定位）

最新推荐文章于 2023-03-20 08:45:00 发布

娟哥Queenie~

最新推荐文章于 2023-03-20 08:45:00 发布

阅读量1.2k

点赞数 2

分类专栏： vue 文章标签： vue 百度定位

本文链接：https://blog.csdn.net/weixin_44336981/article/details/107480096

版权

本文介绍了如何在Vue项目中使用vue-baidu-map库结合百度地图API实现地图上的标注与input输入框之间的双向绑定。通过获取和设置坐标，实现了点击地图更新标注位置并显示地址，以及在input框输入地址后地图自动定位。

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

1、首先去百度地图官网申请一个ak密钥

只有你申请了密钥，你才可以调用百度地图的API。很简单大家自己去官网申请。
百度地图开放平台：http://lbsyun.baidu.com/

2、vue项目中安装 vue-baidu-map 包

npm i vue-baidu-map

3、在你需要调用百度地图的页面导入包和配置ak

import Vue from "vue";
import BaiduMap from "vue-baidu-map";

Vue.use(BaiduMap, {
// 写自己的ak
  ak: "xxxxxxxxxxxxxxxxxxxxxxx"
});

3、就可以直接以标签的形式调用

<baidu-map
      :center="center"  // 一开始地图显示的中心坐标点
      :zoom="zoom"  // 地图缩放大小
      @ready="handler"  // 地图准备时的函数，里面可调用BMap类和map对象
      style="height:400px; width:600px"
      :scroll-wheel-zoom="true" // 是否可用鼠标滚动缩放地图
      :double-click-zoom="false" // 是否可鼠标双击缩放地图，这里我禁用了
    >
    // 调用百度地图可根据城市定