安装并使用百度地图【vue】

修炼室

已于 2024-11-19 15:49:30 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：使用教程文章标签：百度百度地图 vue

于 2021-12-15 23:11:26 首次发布

本文链接：https://blog.csdn.net/qq_22841387/article/details/121963989

使用教程专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和使用VueBaiduMap组件，包括依赖安装、API配置及关键参数设置，如地图中心经纬度和缩放级别，还提到了滚轮缩放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue Baidu Map

本文详细介绍如何使用 vue-baidu-map 插件实现百度地图的集成与功能扩展。通过清晰的步骤与实用技巧，让您快速掌握这一工具的使用。

一、安装依赖

在项目中安装 vue-baidu-map 依赖：

npm install vue-baidu-map -s

提示：在安装的同时，建议提前申请百度地图 API Key，以便快速完成后续配置。

申请教程：如何申请百度地图API

二、导入插件

在 main.js 文件中导入插件并初始化：

// 导入百度地图插件
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: '您的百度地图API秘钥'
})

关键点：

ak 是百度地图 API Key 的简写，必须正确填写。
若未申请 API Key 或配置错误，可能会导致地图加载失败。

三、创建地图组件

新建一个 Vue 文件（例如 MapView.vue），并将以下代码粘贴进去：

<template>
  <baidu-map
    :center="{ lng: 116.403963, lat: 39.915119 }"
    :zoom="15"
    style="height: 600px; width: 100%"
    :scroll-wheel-zoom="true"
  ></baidu-map>
</template>

<script>
export default {
  name: "MapView"
}
</script>

参数说明

1. `center`（中心点坐标）

属性类型：Object
描述：定义地图的初始中心点，经纬度使用 lng（经度）和 lat（纬度）指定。
实用工具：使用百度拾取坐标系统获取指定位置的经纬度。

2. `zoom`（缩放级别）

属性类型：Number
描述：控制地图的缩放级别，范围为 3（世界）到 19（街区详细）。
注意事项：
- 若 zoom 设置过小或未配置，地图可能无法正确显示内容。
- 示例：
```
:zoom="15" // 显示中等范围
```

3. `scroll-wheel-zoom`（滚轮缩放）

属性类型：Boolean
描述：是否允许用户通过滚轮缩放地图。
建议：对交互要求较高的地图，建议启用该功能。

四、效果展示

按照上述代码配置，运行后地图效果如下：

最终效果

五、进阶功能与优化

1. 添加标记点

使用 bm-marker 组件，可以在地图上添加标记点（Marker）：

<template>
  <baidu-map
    :center="{ lng: 116.403963, lat: 39.915119 }"
    :zoom="15"
    style="height: 600px; width: 100%"
    :scroll-wheel-zoom="true"
  >
    <bm-marker :position="{ lng: 116.403963, lat: 39.915119 }"></bm-marker>
  </baidu-map>
</template>

提示：可以结合点击事件实现更复杂的标记功能。

2. 显示信息窗口

为标记点添加信息窗口，显示详细信息：

<template>
  <baidu-map
    :center="{ lng: 116.403963, lat: 39.915119 }"
    :zoom="15"
    style="height: 600px; width: 100%"
    :scroll-wheel-zoom="true"
  >
    <bm-marker :position="{ lng: 116.403963, lat: 39.915119 }">
      <bm-info-window title="天安门" content="北京市东城区长安街" />
    </bm-marker>
  </baidu-map>
</template>

3. 自定义样式

百度地图支持自定义样式，以满足个性化需求：

配置样式 JSON

进入百度地图样式编辑器定制样式，并获取 JSON 代码。

在地图中应用样式

将样式 JSON 应用到地图：

<template>
  <baidu-map
    :center="{ lng: 116.403963, lat: 39.915119 }"
    :zoom="15"
    :map-style="{ styleJson: 自定义样式JSON }"
    style="height: 600px; width: 100%"
  ></baidu-map>
</template>

4. 地图事件监听

监听地图交互事件，如拖动、缩放等：

<template>
  <baidu-map
    :center="{ lng: 116.403963, lat: 39.915119 }"
    :zoom="15"
    @click="handleMapClick"
    style="height: 600px; width: 100%"
  ></baidu-map>
</template>

<script>
export default {
  methods: {
    handleMapClick(event) {
      console.log('地图被点击', event.point);
    }
  }
}
</script>