storevisit-ui-mobile/src/components/mapMarker.vue

<template>
 <div>
  <baidu-map class="map" :center="{lng: info.lon, lat:info.lat}" :zoom="16" :scroll-wheel-zoom="true"  ak="n4CW0ajDw1LBUIj1RTlwd1bbTTXuN8v6">
    <bm-marker :position="{lng: info.lon, lat:info.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      <bm-label :content="info.addressLine" :labelStyle="{color: 'red', fontSize : '16px'}" :offset="{width: -100, height: 30}"/>
    </bm-marker>
  </baidu-map>
 </div>
</template>

<script>
import {BaiduMap, BmControl,BmLabel, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map'
export default {
  name: "mapMarker",
  components: {
    BaiduMap,
    BmMarker,
    BmLabel
  },
  props: {
    info:{
      type: Object,
        default:()=>{
          return {lng: null, lat: null}
        }
    }
  }
}
</script>

<style scoped>
.map{
  width: 100%;
  height: 400px;
}
</style>