?传入经纬度?和缩放值
<template>
<baidu-map
class="bm-view"
ak='wV9oGUUNbPnvGpNVruQt5KbccvWjTXIo'
:scroll-wheel-zoom="true"
:center="center"
:zoom="zoom"
@ready="handler"
>
<bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: icon, size: {width: 30, height: 30}}"></bm-marker>
</baidu-map>
</template>
<script>
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import {BaiduMap, BmMarker} from 'vue-baidu-map'
export default {
name: 'Map',
components: { BaiduMap, BmMarker },
props: {
lng: {default: ''},
lat: {default: ''},
zoom:{type:Number ,default: 16}
},
data () {
return {
icon: require('./images/地图定位.png'),
center: {lng: 0, lat: 0},}
},
methods: {
handler ({BMap, map}) {
console.log(BMap, map)
let mapStyle= {style:'midnight'}
map.setMapStyle(mapStyle);
this.center.lng = this.lng
this.center.lat = this.lat
this.zoom = this.zoom || 16
}
}
}
</script>
<style lang="less" scoped>
.bm-view {
width: 100%;
height: 100%;
/*height: 300px;*/
/deep/ .BMap_cpyCtrl{ display: none !important;}
}
</style>
|