百度地图的基本使用 vue

想要使用百度地图的基本功能，首先需要在 Vue 项目中引入百度地图 JavaScript API。可以在 index.html 中直接引入：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

其中，密钥需要在百度地图开放平台申请获得。

接着，在 Vue 组件中可以使用百度地图提供的全局对象 `BMap` 来创建地图实例和添加覆盖物等操作。以下是一个简单的示例：

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

<script>
export default {
  mounted() {
    // 创建地图实例
    const map = new BMap.Map("map")

    // 设置中心点和缩放级别
    const point = new BMap.Point(116.404, 39.915)
    map.centerAndZoom(point, 15)

    // 添加标注
    const marker = new BMap.Marker(point)
    map.addOverlay(marker)
  }
}
</script>

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

在上面的示例中，我们在 `mounted` 钩子函数中创建了地图实例，并在其中设置了地图的中心点和缩放级别。然后使用 `BMap.Marker` 类创建了一个标注，并添加到地图上。

注意，为了让地图显示出来，我们需要在组件的模板中添加一个 `<div>` 元素，并设置其宽度和高度，用于容纳地图。在上面的示例中，我们设置了一个 `id` 为 `map` 的 `<div>` 元素，并在样式中设置了它的宽度为 100%、高度为 500px。

当然，百度地图提供的功能远不止于此，你可以根据自己的需求来使用其他 API，例如搜索、路线规划、地图事件等等。更多详细的使用方法可以参考百度地图 JavaScript API 的官方文档。