乘风原创程序

  • vue全局接入百度地图的实现示例
  • 2022/3/20 11:12:28
  • 前言

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

    一、获取ak密钥

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

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

    百度地图ak

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

    注意:ip白名单要合理配置

    百度地图ip白名单

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

    二、整合步骤

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

    1、npm下载包

    代码如下(示例):

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

    npm下载百度地图

    2、在main.js文件引入

    代码如下(示例):

    import baidumap from 'vue-baidu-map'
    vue.use(baidumap, {
      // ak密钥
      ak: 'pynskau5yndinxabac3agtroxny6wkey'
    })
        
    

    main.js引入百度地图

    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全局接入百度地图内容请搜索本教程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持本教程网!