前端开发框架
当前页

地图组件 ​

说明 ​

关于地图组件的封装，根据分析后做了统一处理，目前只是将开放平台的地图js进行统一提升到<head><script>中，暂时未申请开放平台的key

hooks ​

由于地图组件需要将官方地图的api写入到script标签中，这里我们进行了功能封装，将对应操作写入到hook中

import { useScript } from "/@/views/demo/hooks/web/useScript";

效果 ​

map.png

使用 ​

vue
<template>
  <div ref="wrapRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup name="BaiduMap">
  import { ref, nextTick, unref, onMounted } from 'vue';

  import { useScript } from '/@/views/demo/hooks/web/useScript';

  // 百度地图
  const BAI_DU_MAP_URL =
    'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830&s=1';

  defineProps({
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: 'calc(100vh - 78px)',
    },
  });

  const wrapRef = ref<HTMLDivElement | null>(null);
  const { toPromise } = useScript({ src: BAI_DU_MAP_URL });

  async function initMap() {
    await toPromise();
    await nextTick();
    const wrapEl = unref(wrapRef);
    if (!wrapEl) return;
    const BMap = (window as any).BMap;
    const map = new BMap.Map(wrapEl);
    const point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);
  }

  onMounted(() => {
    initMap();
  });

示例 ​

示例工程目录src/views/demo/pages/map