百度地图和高德地图在vue项目中的引用

在Vue项目中引用百度地图和高德地图可以通过以下步骤进行：

引入地图库：在index.html文件中引入地图库的CDN链接，例如：

<!-- 引入百度地图API -->
<script src="https://api.map.baidu.com/api?v=2.0&ak=YourBaiduMapApiKey"></script>

<!-- 引入高德地图API -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YourAmapApiKey"></script>

创建地图组件：在Vue项目的组件中创建地图组件，例如：

<template>
  <div id="mapContainer"></div>
</template>

<script>
export default {
  mounted() {
    // 百度地图
    const BMap = window.BMap;
    const map = new BMap.Map("mapContainer");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    // 高德地图
    const AMap = window.AMap;
    const map = new AMap.Map("mapContainer", {
      zoom: 11,
      center: [116.404, 39.915]
    });
  }
}
</script>

在上述代码中，mapContainer是一个用于容纳地图的div元素的id。

需要注意的是，百度地图和高德地图的API使用方式有所不同，具体的使用方法可以参考官方文档。

样式设置：为了保证地图能够正确显示，需要在CSS文件中设置地图容器的高度和宽度，例如：

#mapContainer {
  width: 100%;
  height: 400px;
}

这样就可以在Vue项目中引用百度地图和高德地图了