Umi 3.x 使用百度地图服务

需求描述

需要在前端页面中使用地图定位功能，所以在前端umi项目中使用百度地图服务，由于umi项目默认没有入口的html文件，所以无法通过常规的在head中加入外链js的方式使用

解法方法

一、用umi-plugin 插件的方式把链接加到页面上

  1. 在src/page下 ，新建文件 plugins/customPlugin.js
/**
* customPlugin.js
*/
export default (api, opts) => {
  // 在HTML尾部添加脚本 
  api.addHTMLScripts(() => {
    return [
      {
        // 百度地图
        src: '//api.map.baidu.com/api?v=3.0&ak=你申请的百度地图AK码'
      }
    ]
  })
}
  1. 在umirc.ts中导入本地新建的插件文件customPlugin.js
/**
* umirc.ts，umi项目默认配置文件
*/
import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {...},
  dva: {},
  routes: [...],
  fastRefresh: {},
  
  + plugins: ['./src/plugins/customPlugin.js']
});

二、 手动添加document.ejs文件

  1. 在src/page下，新建document.ejs文件
<!Doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="format-detection" content="email=no"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title> </title>
  <script src="//api.map.baidu.com/api?v=3.0&ak=你的百度地图AK码"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

前端代码

import React, { useEffect } from 'react';
import { Modal } from 'antd';

/**
 * 新建考勤地点模态框
 * */
export default function XjkqddModal(props) {
  const { modalVisible, setModalVisible } = props;     // 模态框状态

  useEffect(() => {
    renderMap();
  }, []);

  const renderMap = () => {
    var map = new BMap.Map("container", {
      coordsType: 5
    });

    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
  };

  return (
    <Modal
      title="考勤地点"
      visible={modalVisible}
      onOk={() => setModalVisible(false)}
      okText='确定'
      onCancel={() => setModalVisible(false)}
      cancelText='取消'
      width={1000}
      forceRender
    >
      <div id='container' style={{ width: 300, height: 300 }} />
    </Modal>
  )
}

效果

在这里插入图片描述

报错

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意点

  1. Antd 4.x的modal在import进页面时，是仅仅挂载，没有渲染其中的DOM结构，所以取不到map实例挂载的 DIV，modal的API中有个forceRender的属性，加上后modal挂载的同时会把DOM渲染出来
  2. 初始化地图实例要在render后执行，不然会取不到DIV容器
  3. 地图容器DIV一定要指定宽高，地图并不会撑开DIV，而是把你设置宽高的DIV撑满
版权声明：本文为weixin_44240581原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。