vue-cli创建的项目中使用百度地图
记录下,vue-cli创建的vue项目中使用百度地图
一开始我尝试了很多的方法,比如说直接在index.html上加上使用百度地图api的外链,然后查到的相关博文指导说的是在webpack.config.js文件中加上bmap。但是我是使用的vue-cli的图形化界面直接创建的vue项目,这个文件被隐藏了,不过可以自己新建一个vue.config.js文件,加上bmap。但是我是使用的chainWebpack,我在externals里面写了,并没有用。后面也没有过多尝试。
然后,发现可以安装 vue-baidu-map依赖,一样使用。
可以使用
npm install vue-baidu-map --save
我是使用脚手架搭建的项目,直接在图形化界面的依赖中搜索下载即可
装好包之后,在项目中import
全局注册是
入口is中import
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
然后可以使用baidu-map等各种组件了
<template>
<baidu-map class="bm-view">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
局部注册也可以,推荐
<template>
<baidu-map class="bm-view" ak="YOUR_APP_KEY">
</baidu-map>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components: {
BaiduMap
}
}
</script>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
我自己是使用了全局注册
实现了,打开网页的时候,获取定位展示地图
<template>
<baidu-map class="map" :center="center" :zoom="zoom" @ready="initMap" :map-click="false" :double-click-zoom="false" :scroll-wheel-zoom="true" :mapStyle="mapStyle" >
<!--自动定位-->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true" @locationSuccess="getLoctionSuccess" @locationError="getLocationError">
</bm-geolocation>
</baidu-map>
</template>
<script>
// import { BaiduMap, BmScale, BmGeolocation } from 'vue-baidu-map'
export default {
data() {
return {
autoLocationPoint: {lng: 0, lat: 0},
initLocation: false,
center: '',
zoom: 12,
mapStyle:{
features: ["road","building","water","land"],//隐藏地图上的"poi",
style : "midnight",
}
}
},
methods: {
initMap ({BMap, map}) {
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
],
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
}));
var top_left_navigation = new BMap.NavigationControl();
map.addControl(top_left_navigation);
let _this = this; // 设置一个临时变量指向vue实例,因为在百度地图回调里使用this,指向的不是vue实例;
//使用浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
console.log(r);
_this.center = {lng: r.longitude, lat: r.latitude}; // 设置center属性值
_this.autoLocationPoint = {lng: r.longitude, lat: r.latitude}; // 自定义覆盖物
_this.initLocation = true;
console.log('center:', _this.center) // 如果这里直接使用this是不行的
},{enableHighAccuracy: true})
},
},
components: {
}
}
</script>
<style lang='less' scoped>
.map{
width: 100%;
height: 100%;
margin: 0px !important;
}
</style>
,
}