-
npm install vue-baidu-map --save
-
在main.js文件中设置你申请的百度的密钥key
//main.js文件 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '你的秘钥' })
-
组件中直接使用,全部代码如下
<template> <div class="baidu-css"> <baidu-map class="bm-view" :center="center" :scroll-wheel-zoom="true" :zoom="zoom" @ready="handler" > <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" ></bm-geolocation> </baidu-map> </div> </template> <script> export default { name: "new", components: {}, data() { return { center: { lng: 0, lat: 0 }, //定位 zoom: 3, //缩放等级 }; }, methods: { handler({ BMap, map }) { console.log(BMap, map); this.center.lng = 114.299815; this.center.lat = 30.595174; // this.zoom = 10 //市级区域 this.zoom = 13; //更精确的缩放 }, }, mounted() {}, }; </script> <style lang="scss" scoped> .bm-view { width: 100%; height: 800px; } .baidu-css { margin-left: 20px; margin-top: 20px; margin-bottom: 20px; } </style>
Vue2引入百度地图使用
于 2024-03-27 15:25:19 首次发布