vue3项目中引入百度地图

阿怪睡不着

已于 2023-08-08 15:52:47 修改

阅读量1.1k

点赞数 1

文章标签：前端 vue.js

于 2023-08-07 17:41:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43751614/article/details/132150901

版权

本文详细介绍了如何在Vue项目中集成百度地图，包括注册密钥、安装插件、配置API、添加地图标记、定位以及使用导航、比例尺和全景等控件。

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

第一步

登陆百度地图开放平台，申请密钥

第二步

安装，操作手册点这里--->操作手册

npm install vue-baidu-map-3x --save

第三步

在index.html中引用

<!-- 百度地图 -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

第四步

基本使用

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { reactive, ref } from 'vue'
import {
  BaiduMap,
  BmMapType,
  BmCityList,
  BmMarker,
  BmGeolocation,
  BmInfoWindow,
} from 'vue-baidu-map-3x'

const show = ref(false)
const address = ref<any>(undefined)
const state = reactive<any>({
  lng: 116.403401,
  lat: 39.924823,
})

/**
 * 添加点标记
 * @param e e
 */
const handelClick = (e: any) => {
  show.value = false
  state.lng = e.point.lng
  state.lat = e.point.lat
  const geocoder = new window.BMap.Geocoder()
  // 解析地址
  geocoder.getLocation(e.point, (res: any) => {
    if (res) {
      show.value = true
      address.value = res.address
    }
  })
}
</script>
<template>
  <baidu-map
    class="bm-view"
    :center="{ lng: 116.403401, lat: 39.924823 }"
    :zoom="15"
    :scroll-wheel-zoom="true"
    ak="lKTF6dTPp0bflD1mToHqAhmfIhGml6mn"
    v="3.0"
    type="API"
    @click="handelClick"
  >
    <!-- anchor：控件所在方位 可选(BMAP_ANCHOR_TOP_LEFT,BMAP_ANCHOR_TOP_RIGHT,BMAP_ANCHOR_BOTTOM_LEFT，BMAP_ANCHOR_BOTTOM_RIGHT) 左上，右上，左下，右下-->
    <!-- 分别是二维地图和卫星地图 -->
    <bm-map-type
      :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
    ></bm-map-type>
    <!-- 城市列表-选择城市搜索城市(支持市级以上搜索) -->
    <bm-city-list
      anchor="BMAP_ANCHOR_TOP_LEFT"
      @changeAfter="message.success('成功切换城市')"
    ></bm-city-list>
    <!-- 点标记 -->
    <bm-marker :position="state" :dragging="true" :raiseOnDrag="true">
      <bm-info-window :show="show" @close="show = false" @open="show = true">
        {{ address }}
      </bm-info-window>
    </bm-marker>
    <!-- 定位 -->
    <bm-geolocation
      anchor="BMAP_ANCHOR_TOP_RIGHT"
      :showAddressBar="true"
      :autoLocation="true"
      @locationSuccess="
        (e:any) =>
          message.success(
            '定位成功已切换到' +
              e.addressComponent.province +
              e.addressComponent.city,
          )
      "
      @locationError="message.error('定位失败，请稍后再试')"
    ></bm-geolocation>
  </baidu-map>
</template>

<style scoped>
.bm-view {
  width: 100%;
  height: 100%;
  border: 10px solid #ececec;
}
</style>

效果图如下：

地图控件

<script setup lang="ts">
import {
  BaiduMap,
  BmNavigation,
  BmScale,
  BmOverviewMap,
  BmPanorama,
} from 'vue-baidu-map-3x'
</script>

<template>
  <baidu-map
    class="bm-view"
    :center="{ lng: 116.403185, lat: 39.92272 }"
    :zoom="15"
    :scroll-wheel-zoom="true"
    ak="lKTF6dTPp0bflD1mToHqAhmfIhGml6mn"
    v="3.0"
    type="API"
  >
    <!-- anchor：控件所在方位 可选(BMAP_ANCHOR_TOP_LEFT,BMAP_ANCHOR_TOP_RIGHT,BMAP_ANCHOR_BOTTOM_LEFT，BMAP_ANCHOR_BOTTOM_RIGHT) 左上，右上，左下，右下 -->
    <!-- 缩放 -->
    <bm-navigation
      anchor="BMAP_ANCHOR_TOP_RIGHT"
      :enableGeolocation="true"
      :showZoomInfo="true"
    ></bm-navigation>
    <!-- 比例尺 -->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!-- 缩略图 -->
    <bm-overview-map
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :isOpen="true"
    ></bm-overview-map>
    <!-- 全景控件 -->
    <bm-panorama anchor="BMAP_ANCHOR_TOP_LEFT"></bm-panorama>
  </baidu-map>
</template>

<style scoped>
.bm-view {
  width: 100%;
  height: 100%;
  border: 10px solid #ececec;
}
</style>

效果图如下：