在VUE中使用vue-baidu-map获取经纬度和搜索地址

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

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

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'
}) 

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

<template><baidu-map id="allmap" @ready="mapReady" :scroll-wheel-zoom="true"></baidu-map>
</template>

<script> export default {methods: {//地图初始化mapReady({ BMap, map }) {this.point = new BMap.Point(113.27, 23.13); // 选择一个经纬度作为中心点map.centerAndZoom(this.point, 12); //设置地图中心点和缩放级别this.BMap=BMapthis.map=map}}
} </script>

<style> #allmap{height: 450px;width: 100%;margin: 10px 0;
} </style>