vue项目中接入百度地图api
vue项目中接入百度地图api1、申请百度地图秘钥申请地址:http://lbsyun.baidu.com/apiconsole/key2、安装插件$ npm install vue-baidu-map --save3、 main.js中引用vue-baidu-map组件import Vue from 'vue';import BaiduMap from 'vue-baidu-m...
·
vue项目中接入百度地图api
1、申请百度地图秘钥
申请地址: http://lbsyun.baidu.com/apiconsole/key
2、安装插件
$ 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: '你申请的百度地图秘钥' //官方提供的ak秘钥
})
// 这是全局注册的方法, 也可采用局部注册,只在使用该组件的页面调用组件名即可,具体参考官方文档
4、注册组件map.vue
<template>
<div class="mapbox">
<baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" style="height:100vh" @ready="handler" @click="getClickInfo" >
<!-- 必须给容器指高度,不然地图将显示在一个高度为0的容器中,看不到 -->
<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>
<!-- 因为我采用的是全局注册,所以不用再在该页面上注册components -->
</div>
</template>
<script>
export default {
name: "mapbox",
data() {
return {
center: { lng: 0, lat: 0 }, //经纬度
zoom: 13 //地图展示级别
};
},
methods: {
handler({ BMap, map }) {
console.log(BMap, map);
this.center.lng = 113.6313915479;
this.center.lat = 34.7533581487;
this.zoom = this.zoom;
},
getClickInfo(e) {
console.log(e.point.lng);
console.log(e.point.lat);
this.center.lng = e.point.lng;
this.center.lat = e.point.lat;
}
}
};
</script>
注:该博客为项目过程记录,参考了他人的博客,非原创
更多推荐
已为社区贡献2条内容
所有评论(0)