vue全局接入百度地图的实现示例

目录
  • 前言
  • 一、获取ak密钥
  • 二、整合步骤
  • 总结

前言

本文主要教大家如何把百度地图整合到我们的vue项目中

一、获取ak密钥

1、登录网址 https://lbsyun.baidu.com/

注册百度地图开放平台账号，填写认证信息，并且创建应用

创建完应用后可以在类似界面获取到我们的AK密钥

注意：IP白名单要合理配置

我这里为了方便测试才设置的0.0.0.0/0

二、整合步骤

获取到ak密钥之后就可以与我们的VUE项目进行整合

1、npm下载包

代码如下（示例）：

npm install --save vue-baidu-map --registry=https://registry.npm.taobao.org

2、在main.js文件引入

代码如下（示例）：

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak密钥
  ak: 'pYNskAU5yNDInxABaC3agTroXNy6wKEY'
})

3. 页面引入

代码如下（示例）：

data(){
 	return{
	  // 百度地图信息设置
      // 地址信息
      address: null,
      center: {lng: 0, lat: 0},
      //地图展示级别
      zoom: 13,
	}
}
methods: {
	handler({BMap, map}) {
      this.center.lng = 116.419878;
      this.center.lat = 39.956823;
      this.zoom = this.zoom;
    },
    getClickInfo(e) {
      // 创建地理编码实例
      const myGeo = new BMap.Geocoder();
      let _this = this;
      // 根据坐标逆解析地址
      myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), function (result) {
        if (result) {
          _this.form.warehouseLocation = result.address
        }
      });
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    }
}

<style>

.mapbox {
  width: 100%;
  height: 100%;
}
</style>

效果图

有一个点需要注意在方法里进行逆解析地址的时候记得要在逆解析方法外 获取this值
let _this = this;

总结

到此这篇关于vue全局接入百度地图的实现示例的文章就介绍到这了,更多相关vue全局接入百度地图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue用BMap百度地图实现即时搜索功能

    vue用BMap百度地图实现即时搜索功能

    本文实例为大家分享了vue用BMap百度地图实现即时搜索功能的具体代码,供大家参考,具体内容如下 功能如下: 搜索框搜索---自动下拉---点击数据---数据显示在搜索框里---点击新增--数据显示在下方--点击删除--删除当前 代码: 首先去百度开发者申请一个key 然后将key引入到项目的 index.html: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak

  • vue百度地图 + 定位的详解

    vue 百度地图 + 定位 前提需要自己有百度的密钥,如没有可以去百度地图申请 一.在主目录下的index.html引入js,例如:   二.在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级,例如: 三.在项目中引入BMap: 四.代码: <template> <div class="home"> <div id="allmap" class="allmap&

  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • vue项目中使用百度地图的方法

    vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • 详解vue.js下引入百度地图jsApi的两种方法

    前言 今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们

  • Vue的百度地图插件尝试使用

    Vue的百度地图插件尝试使用

    百度地图插件 安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引入 Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', }) ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apico... 地图视图 BmView 是用于渲染百度地图实例可视化区域的容器 使用 Bmview 渲

  • vue全局接入百度地图的实现示例

    vue全局接入百度地图的实现示例

    目录 前言 一.获取ak密钥 二.整合步骤 总结 前言 本文主要教大家如何把百度地图整合到我们的vue项目中 一.获取ak密钥 1.登录网址 https://lbsyun.baidu.com/ 注册百度地图开放平台账号,填写认证信息,并且创建应用 创建完应用后可以在类似界面获取到我们的AK密钥 注意:IP白名单要合理配置 我这里为了方便测试才设置的0.0.0.0/0 二.整合步骤 获取到ak密钥之后就可以与我们的VUE项目进行整合 1.npm下载包 代码如下(示例): npm install -

  • vue项目实现便捷接入百度地图API

    vue项目实现便捷接入百度地图API

    目录 1.账号注册 2.获取密钥 3.创建项目 4.项目导入 5.效果展示 1.账号注册 在百度地图开放平台注册账号并登录网站地址: https://lbsyun.baidu.com/index.php?title=jspopularGL 2.获取密钥 进入开发文档并进行密钥申请 3.创建项目 4.项目导入 此时我们已经获取了密钥,接着就可以在项目中导入了 首先安装百度地图 npm install vue-baidu-map --save 接着注册(这里我采用局部注册) //局部注册 百度地图

  • Vue项目引用百度地图并实现搜索定位等功能(案例分析)

    目录 一.效果图及功能点 二.前期准备 三.引入百度地图 四.功能解析 本文给大家介绍如何在vue项目中引用百度地图,并设计实现简单的地图定位.地址搜索功能. Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台 给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路线导航等功能.本文给大家介绍如何在vue项目中引用百度地图,并设计实现简单的地图定位.地址搜索功能. 一.效果图及功能点 先来看一下效果图

  • 浅谈Vue下使用百度地图的简易方法

    浅谈Vue下使用百度地图的简易方法

    Vue下使用百度地图的简易方法,分享给大家,具体如下: 最近的项目里面,需要用到将具体地址转换成百度坐标系的经纬度,需求比较简单,所以就没有采用GitHub里面的百度Vue插件. 废话不说,直接贴出代码: 引入:在需要用到百度地图的组件里面直接引入 export default { methods: { loadBMapScript () { let script = document.createElement('script'); script.src = 'http://api.map.b

  • JavaScript接入百度地图API的方法步骤

    JavaScript接入百度地图API的方法步骤

    目录 一.百度地图API接入 二.在HTML中使用百度地图API 1.在html中引入百度地图js文件 2.在网页中定义一个DIV用于显示地图 3.在网页中显示地图 4.添加可选控件 5.定位功能 6.添加地图标记 7.给地图标记添加点击事件 8.添加信息窗口 9.路径规划 10.正逆地址解析 一.百度地图API接入 1.搜索百度地图开发平台 2.注册百度账号 3.登陆并申请成为开发者 4.在百度地图开发平台的首页选择控制台,在控制台中创建应用 创建好应用以后就能在控制台我的应用中看到这个应用,

  • vue中调用百度地图获取经纬度的实现

    vue中调用百度地图获取经纬度的实现

    项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度 拖动小红标 获取经纬度 关键词 查询获取经纬度 前期准备 首先,我们需要取百度官方申请一个地图api秘钥,https://lbsyun.baidu.com/apiconsole/key 进入后在应用管理,我的应用去申请即可. 申请好以后,我们打开vue项目中public文件下的index.html文件,拼接百度AK值并引入 <script type=&quo

  • 如何在vue中使用百度地图添加自定义覆盖物（水波纹）

    如何在vue中使用百度地图添加自定义覆盖物（水波纹）

    简介 一如既往,我来给大家分享一个项目中遇到的比较有意思的需求并介绍一下相应的实现过程. 话不多说,直接上图: 具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物.实现的过程作者分为以下两点给大家介绍介绍. 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写自定义覆盖物的,那么首先我们来讨论一下水波纹动画的实现. 首先我们可以看到图中的覆盖物是由一个红心和水波紋组成,其中红心是固定不动的,那么我们可以直接这么写: <div class="

  • WinForm调用百度地图接口用法示例

    本文实例讲述了WinForm调用百度地图接口用法.分享给大家供大家参考,具体如下: 1.首先用一个html文件调用百度地图接口(主要注册一个序列号): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • 2种在vue项目中使用百度地图的简单方法

    地图在项目中用得很多,最近也用了几次,好长时间不用都记不清了,闲暇时整理了vue里使用百度地图的2种方法,方便自己查看,也分享给大家,希望可以帮助有需要的人. 普遍的方法是: 1.index.html 中引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 2.新建个组件maps 注意 :不要把组件命名为

随机推荐