在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介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!