Vue3.0中引入地图（谷歌+高德+腾讯+百度）

Vue3.0中引入地图（谷歌+高德+腾讯+百度）_氷泠-CSDN博客

以前写的一个博客，vue3引入百度地图组件，后来发现还是有问题，原来现在各个地图对Vue3的适配度不高，发现这篇博客可以

附一个百度地图demo

<template>
<div class="wrapper">
  <div id="container" ></div>
  <Footer />
</div>

</template>
<script>
import Footer from '../components/Footer.vue'
export default {
  components: { Footer },
  mounted(){
	var map = new BMap.Map('container')
    var point = new BMap.Point(112.727472,37.7547)
    map.centerAndZoom(point, 16)
    map.enableScrollWheelZoom(true)
    map.addControl(new BMap.ScaleControl());   
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());  
    var stCtrl = new BMap.PanoramaControl();  
    stCtrl.setOffset(new BMap.Size(10, 35));  
    map.addControl(stCtrl);

    var marker = new BMap.Marker(point);        // 创建标注    
    map.addOverlay(marker);                     // 将标注添加到地图中 
}

}
</script>

<style>
#container{
  margin: 0 auto;
  height: 600px;
  margin-bottom: 15px;
}
</style>

具体使用：查看官方文档

 JavaScript API - 自定义标注 | 百度地图API SDK