Vue使用百度地图_会说法语的猪_vue 百度地图

irpas 02-07 1028

百度地图开放平台?https://lbs.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

?javaScript API?https://lbs.baidu.com/index.php?title=jspopularGL

?百度地图实例?https://lbsyun.baidu.com/index.php?title=open/jsdemo

Vue Baidu Map文档?https://dafrok.github.io/vue-baidu-map/#/zh/index?

在Vue中我们可以使用 Vue Baidu Map来构建我们的地图应用，上面这个是中文文档。

在开始之前我首先申请了密钥：百度地图开放平台? -> 控制台 -> 应用管理 -> 我的应用 -> 创建应用

1. 安装? $ npm install vue-baidu-map --save 2. main.js 全局引入注册? import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY' }) 3. 组件中使用? <template> <div class="BaiDuMap"> <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" style="width: 100%; height: 100%" @ready="handler" @click="getClickInfo" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom" >  <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" ></bm-geolocation> <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> </baidu-map> </div> </template> <script> export default { data() { return { // 地址信息 address: null, center: { lng: 0, lat: 0 }, //地图展示级别 zoom: 11, }; }, methods: { handler({ BMap, map }) { this.center.lng = 116.404; this.center.lat = 39.915; this.zoom = this.zoom; }, getClickInfo(e) { // 创建地理编码实例 const myGeo = new BMap.Geocoder(); // 根据坐标逆解析地址 myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => { console.log(result, "result-->>>>"); if (result) { this.address = result.address; } }); this.center.lng = e.point.lng; this.center.lat = e.point.lat; }, syncCenterAndZoom(e) { console.log(e.target, 'e.target-->>>>') const { lng, lat } = e.target.getCenter(); this.zoom = e.target.getZoom(); }, }, }; </script> <style scoped> .BaiDuMap { width: 100%; height: 100%; } </style>

效果：?

参考：

https://·/p/be11e4d4d626

vue-baidu-map ?使用("踩坑")