使用vue-baidu-map对百度地图进行输入框搜索定位

最新推荐文章于 2024-04-12 13:28:34 发布

五分糖的苦

最新推荐文章于 2024-04-12 13:28:34 发布

阅读量1.9k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/chun_sh/article/details/116425222

版权

本文介绍了如何在Vue项目中使用vue-baidu-map插件进行百度地图的输入框搜索定位功能。首先通过npm安装vue-baidu-map，并在main.js中全局注册，配置百度地图的ak。接着展示了在表单中使用该插件的示例代码，当选择搜索结果时，地图能自动定位到相应位置。

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

最近负责的一个vue项目中需要调用百度地图api做标记打点的需求，记录一下：
vue-baidu-map 官方地址 https://www.npmjs.com/package/baidu_map
一.插件的安装
1.npm 安装
npm install vue-baidu-map --save

2.js 引入
index.html 中指的是public文件夹下的index.html

二.使用（我是全局注册，局部注册需要声明ak）
1.全局注册(一次性引入百度地图组件的所有组件) main.js文件中
import Vue from ‘vue’
import BaiduMap from ‘vue-baidu-map’
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */
ak: ‘自己的百度地图秘钥’
})

demo
这是在form表单中写的

<el-form-item label="详细地址" prop="address" id="r-result">
				 <div class="app-container">
				    <el-autocomplete
				      v-model="addShopRuleForm.address"
				      :fetch-suggestions="querySearch"
				      placeholder="请输入详细地址"
				      style="width: 100%"
				      :trigger-on-