Vue利用vue-baidu-map实现获取经纬度和搜索地址_vue.js_

在开发项目的时候，发现需要获取经纬度，由于这个项目是用vue写的，最后决定使用vue-baidu-map来快速获取经纬度

基于 Vue.js 封装的百度地图组件，运行流畅，代码简单易懂，几乎包含了百度地图官方的所有API，文档地址：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

1.申请百度地图密钥

搜索'百度地图开放平台'，选择头部导航栏开发文档里的JavaScript API

然后点击申请密钥

2.安装vue-baidu-map

终端运行

npm install vue-baidu-map --save 

main.js里全局注册

import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY' })

引入组件,初始化地图，开启鼠标滚轮控制地图缩放

一个简单的地图就出来了

3.获取经纬度

3.1 为地图添加点击事件,获取经纬度

3.2 添加BmInfoWindow信息窗口组件和BmMarker标注,点击地图时弹出

3.3 添加BmAutoComplete组件，输入地址自动补全

3.4 最后点击搜索按钮地图跳转到搜索位置并打开信息窗口和标注

最后放上全部代码

最终实现效果

到此这篇关于Vue利用vue-baidu-map实现获取经纬度和搜索地址的文章就介绍到这了,更多相关Vue vue-baidu-map经纬度内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！