vue添加定位功能_Vue项目引用百度地图并实现搜索定位等功能

Tip：本篇文章为案例分析，技术点较多，所以篇幅较长，认真阅览的你一定会学到很多知识。

前言：百度地图开放平台 给开发者们提供了丰富的地图功能与服务，使我们的项目中可以轻松地实现地图定位、地址搜索、路线导航等功能。本文给大家介绍如何在vue项目中引用百度地图，并设计实现简单的地图定位、地址搜索功能。

一、效果图及功能点

先来看一下效果图

效果图看不够？ 点此 试试在线操作！(初次进入加载较慢，请耐心等待)

功能点：

挂载百度地图

封装逆地址解析函数(根据坐标点获取详细地址)

设置图像标注并绑定拖拽标注结束后事件

添加(右上角)平移缩放控件

添加(左下角)定位控件

浏览器定位(定位当前地点)

绑定点击地图任意点事件

结合element-ui实现输入提示选取地址并定位功能

二、前期准备

在正式开发之前，我们先做好以下准备：

在你的vue项目中引入element-ui (引入方法 戳这)

说明：本案例是结合element-ui进行开发，主要是为方便实现上面第8点功能，大家若是引入其他UI框架也可以，功能实现方法参照本案例自行修改即可。

申请百度地图AK

前往 百度地图开放平台控制台 ，登录百度账号，创建应用即得。

三、引入百度地图

下面介绍如何在vue项目中引入百度地图

方法一

第1步：在 index.html 中引入下面代码，注意将你的AK代入

第2步：在 webpack.base.conf.js 添加externals.BMap配置，与entry平级，内容如下，

entry: {

app: ['babel-polyfill', './src/main.js']

},

externals: {

BMap: 'BMap'

}

第3步：在组件中引入BMap

import BMap from 'BMap'

方法二

我们知道，vue-cli 3.0+ 的版本已经取消了webpack.conf这些文件了，所以上面的方法就不适用了。而且，方法一在index.html中全局引入百度api，有点耗性能。更多时候我们只希望在单个组件里按需引入即可，所以下面介绍的是以封装的方法引入。

第1步：在你的项目js资源文件夹下新建loadBMap.js文件，内容如下：

/**

* 动态加载百度地图api函数

* @param {String} ak 百度地图AK，必传

*/

export default function loadBMap(ak) {

return new Promise(function(resolve, reject) {

if (typeof window.BMap !== 'undefined') {

resolve(window.BMap)

return true

}

window.onBMapCallback = function() {

resolve(window.