vue项目引入百度地图简单使用

在vue项目中使用百度api展示地图组件

官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

1.获取百度地图秘钥

http://lbsyun.baidu.com/apiconsole/key

2.在vue项目中安装百度地图插件

$ npm install vue-baidu-map --save

3.在main.js文件中注册vue-baidu-map组件,这里就直接全局注册了

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'	// ak 是在百度地图开发者平台申请的密钥
})

4.在页面中使用

<template>
  <baidu-map
    class="bm-view"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
  ></baidu-map>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 }, //经纬度
      zoom: 1, //地图展示级别
    };
  },
};
</script>

<style>
.bm-view {
  width: 500px;
  height: 500px;
}
</style>

注：由于最近项目需要使用，记录学习一下！

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。