Vue3 中百度地图的使用

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

概述

最近项目开发中要使用百度地图实现遮罩功能，由于百度地图目前还没有支持 Vue3 ，所以只能自己实现百度地图的简单封装，这里记录一下过程，希望能够给有需要的人一点帮助，同时也希望各位大佬能够指出文章的不足之处，对我进行批评指正。

项目初始化

首先我们新建一个项目，执行如下命令

pnpm create vite vue-map
复制代码

选择 vue ，回车，等待项目安装完成， cd 进入项目根目录下，接着安装项目需要的依赖包

pnpm install

安装完成后，我们启动项目

pnpm run dev

控制台输出如下内容

  vite v2.9.10 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 353ms.

说明项目正常启动了

百度地图的引入

使用百度地图，我们首先要注册 百度地图 的账号，选择成为开发者才能使用

注册成功后，我们需要在控制台创建自己的项目，拿到属于自己的 应用访问的AK

百度地图Web开发 JacaScript Api

使用之前我们首先要引用百度地图API文件，我这里有两种方式

1. 直接引用

在 index.html 文件中添加如下代码

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

2. @vueuse/core

@vueuse/core 它是一个基于 Composition API 的实用函数集合,如果你真在使用 Vue3,那我建议你可以了解下这个工具库

• 安装

pnpm install @vueuse/core

• 用法

import { useScriptTag } from '@vueuse/core'

useScriptTag(
  'https://api.map.baidu.com/api?v=3.0&ak=您的密钥',
  // on script tag loaded.
  (el: HTMLScriptElement) => {
    // do something
  },
)

@vueuse/core 提供的 useScriptTag 方式,可以在组件内部使用。

具体情况，可以根据你的项目需要选择一种方式。

百度地图的使用

我们新建一个的组件 src/components/baiduMap.vue, 加入如下内容

<template>
    <div class="map" ref="baiduRef"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const baiduRef = ref()
const map = ref()
const point = ref()

function initMap (lng = 116.405725, lat = 39.935362) {
    map.value = new BMap.Map(baiduRef.value);
    point.value = new BMap.Point(lng, lat);
    
    map.value.centerAndZoom(point.value, 15);
    map.value.enableScrollWheelZoom(true); //滚轮缩放
}

onMounted(() => {
    initMap()
})
</script>
<style lang="scss" scoped>
.map {
    width: 100%;
    height: 400px
}
</style>

然后将组件引入到 App.vue 组件中

<template>
  <BaiduMap  />
</template>
<script setup>
import BaiduMap from './components/baiduMap.vue'
</script>

运行项目

我们调用百度地图的添加覆盖物的方法来测试下是否正常, 添加如下方法，这个方法可以传入三个参数，前两个参数是经纬度，后一个可选参数，icon图标，可以自定义覆盖物

function addMarker(lng, lat, icon) {
  let marker;
  if (icon) {
    marker = new BMap.Marker(new BMap.Point(lng, lat), {
      icon: new BMap.Icon(icon, new BMap.Size(30, 33)),
    });
  } else {
    marker = new BMap.Marker(new BMap.Point(lng, lat));
  }

  map.value.addOverlay(marker);
  return marker;
}

调用函数

addMarker(116.405725, 39.935362)

可以看到已经出现了

我们引入一个图标

import homeIcon from "../assets/icon_home.png"
addMarker(116.405725, 39.935362, homeIcon)

覆盖物改变了