vue3-bMap

外层盒子要有宽高

#  首先要在百度地图官网注册ak并引入 
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=QEKLPsQSGdYog7hfolki1mzjkLhdf6hX"></script>

<div id="allmap"></div>
import { defineComponent, nextTick, onMounted } from 'vue'
export default defineComponent({
  setup () {
    onMounted(() => {
      nextTick(() => {
        initMap()
      })
    })
    const initMap = () => {
      const Bmap = window.BMap
      const map = new Bmap.Map('allmap')
      map.enableContinuousZoom(true) // 启用地图惯性拖拽，
      map.enableScrollWheelZoom(true) // 鼠标缩放
      const point = new Bmap.Point(121.344358, 31.157911)
      // const myIcon = new Bmap.Icon('../static/1.png', new Bmap.Size(43, 55))
      // const marker = new Bmap.Marker(point, { icon: myIcon }) // 创建标注
      const marker = new Bmap.Marker(point) // 创建标注
      // 创建文本标注对象
      const labelopts = {
        position: point, // 指定文本标注所在的地理位置
        offset: new Bmap.Size(0, 0) // 设置文本偏移量
      }
      const label = new Bmap.Label('上海安垚网络科技有限公司', labelopts)
      label.setStyle({
        color: '#fff',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        borderRadius: '10px',
        padding: '0 10px',
        fontSize: '14px',
        lineHeight: '20px',
        border: '0',
        transform: 'translateX(-50%)'
      })
      map.centerAndZoom(point, 17) // 设置中心点坐标和地图级别
      map.addOverlay(label)// 坐标标识
      map.addOverlay(marker) // 将标注添加到地图中
      marker.setAnimation((window).BMAP_ANIMATION_BOUNCE) // 点动画
      // const opts = {
      //   width: 200,
      //   // height: 100,
      //   title: 'dddd'
      //   // message: '这里'
      // }
      // const infoWindow = new Bmap.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts)
      // click=> mouseover
      // marker.addEventListener('click', function () {
      //   map.openInfoWindow(infoWindow, point)
      // })
    }
    return {}
  }
})