umi中使用HTML模板方式引入高德地图

已于 2023-07-04 21:50:08 修改
阅读量440 收藏 1
点赞数 2
文章标签： react reactjs
于 2023-07-03 10:15:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69810721/article/details/131510175
版权

通过um的iHTML 模板，新建 src/pages/document.ejs，umi 约定如果这个文件存在，会作为默认模板。比如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>人才招聘</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>
</head>

<body>
    <noscript>Sorry, we need js to run correctly!</noscript>
    <div id="root"></div>
</body>

</html>

在你的umi项目中找到.umirc.ts文件，在里面配置：

externals: { 'AMap': 'window.AMap' }

 然后需要的页面创建一个div，并且设置它的宽高

<div id="container"></div>
#container {
    width: 100%;
    height: 100%;
}

然后在useEffect中写一下代码：

 var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });

喜欢敲代码o.O
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
umi-plugin-mobx:in在umijs中正常使用mobx-state-tree
03-21
:smiling_face_with_heart-eyes:与umi一起使用mobx-state-tree 。 :sparkles:特征 自动使用状态树节点包装路线组件。 通过使用umi/dynamic支持动态导入状态树节点。 使用Mobx生态系统而不是Redux。 解析规则与umi-plugin-dva ，因此默认情况下只导出状态树节点。 :rocket:安装 yarn add umi-plugin-mobx :hammer_and_wrench:用法 添加插件 将插件添加到.umirc.js文件中，以忽略名为stores或其他自定义名称的模型文件夹，您需要安装umi-plugin-routes告诉umi忽略它们。 安装umi-plugin-routes 。 yarn add umi-plugin-routes // .umirc.js export default { plugins : [ [ 'umi-plugin-mobx' , { modelName : 'store
umi3+dva编程学习资源，自用
06-21
umi3+dva编程学习资源，自用
中台前端框架AntDesignPro document.ejs文件详解
最新发布
知行合一
02-28 1289
ejs文件是使用EJS（Embedded JavaScript templating）模板引擎创建的模板文件。EJS是一种简单而强大的模板语言，可以在HTML文件中嵌入JavaScript代码。EJS主要用于服务器端渲染（SSR）的场景，也可以在构建时（使用Node.js脚本）动态生成HTML文件。
umi-template:umi开发模板
03-14
海米模板
React项目(UmiJS)中使用高德地图
weixin_45892086的博客
03-02 1014
React AMap 这是一个基于 React 封装的高德地图组件. 文档地址 https://uiw.gitee.io/react-amap/#/ 01、安装 npm install @uiw/react-amap --save 02、使用 在文档左侧找到需要使用的例子。在右侧直接复制对应代码。按需进行修改。 03、例子（贝塞尔曲线的使用） import React, { useState } from "react"; import { Map, APILoader, BezierCurve } fro
使用react-amap高德提供的接口简单化实现地图
李小小的博客
12-27 4563
本篇文章主要介绍的是 在React工程中 使用react-amap组件来写一个地图，地图上加一个点标记； 注意 ：目前的本人发现在使用react-amap会对 umi 搭建的工程有所影响，建议使用原生高德api（document.ejs【可以看我的上一篇博客，我有详细的写过怎么使用】）来自己手动做个地图可控组件，虽然稍微有点麻烦，但是毕竟项目上线这个方法比较安全。 下面看一下我的组件是怎么写的吧...
umi-plugin-devhtml:用于为umi dev保存物理HTML文件的插件
05-13
umi-plugin-devHtml 用于为umi dev保存物理HTML文件的插件。 用法 安装 $ npm install --save umi-plugin-devHtml 通过.umirc.js配置， export default { plugins : [ 'umi-plugin-devHtml' ] , } 通过示例进行测试 $ cd example $ DEBUG=umi-plugin * CLEAR_CONSOLE=none umi dev 然后在example/.umirc.js切换modifyHtml配置，并检查examples/pages/.umi/index.html 。 注意 该插件不支持MPA（多页应用程序）
umi 引入高德地图
Cahier
07-02 1377
在config文件下新建mapPlugin.js export default (api) => { api.addHTMLHeadScript({ type: "text/javascript", src: 'https://webapi.amap.com/maps?v=1.4.9&key=b1876df77766a9ea12e4e047fc3588fc', }); }; 在plugin.config.js下加上 ['./config/mapPlugin.
React插件篇：umi中使用高德地图（入门篇）
实事求是，艰苦奋斗，小小的梦想，终将实现。
12-11 1707
前言 在我们平时的开发需求中，或多或少会遇到一些需要用到地图的地方。因此即小程序之后，我有拓展了以下React的Umi框架中使用高德地图。 地址 1、高德开发平台地图js API指南 相关文章 微信小程序中使用高德sdk 提示：以下是本篇文章正文内容，下面案例可供参考 效果展示 这里是一个卫星与网络图层。这里对图层不理解的请到官网中查看。 高德公众平台，图层文档地址 一、准备阶段 注册与申请key 1、在高德开放平台注册成为开发者 2. 登陆之后，在进入「应用管理」 页面「创建新应用」 3.
antdPro、umi、配置环境变量，多环境多份配置文件，document.ejs中使用变量
weixin_43026567的博客
03-14 2181
环境，那么现在我们就需要配置这三个环境对应的所需要使用的全局变量（网络请求地址，图片路径之类的），配置完之后就可以通过不同的打包命令来直接打包，而不需要一个个手动去改了。项目要打包部署到不同环境，需要对应不同的api地址和名称，例如后台管理项目中左上角的title和网页title及其他页面中需展示的不同名称。也能访问到，但是项目重新启动的时候config.xx.ts中的变量就是。代表所需使用的全局变量，也可以在这里定义其他需要使用的全局变量。就是刚才我们在config.xx.ts中定义的。
【react踩坑记录2】umijs中如何在首页中document.ejs引用全局变量
TanMengyi的博客
02-03 4848
首先，在umijs中，document.ejs文件就对应index.html， 官方原话： 1、 新建 src/pages/document.ejs，umi 约定如果这个文件存在，会作为默认模板 2、模板里可通过 context 来获取到 umi 提供的变量，context 包含： route，路由信息，需要打包出多个静态 HTML 时（即配置了 exportStatic 时）有效 config，用户配置信息 比如： <link rel="icon" type="image/x-icon" h
html引入高德地图demo
07-24
此demo的功能是在html文件中，引入高德地图API，简单的入门小例子。
react-高德地图的React实现
08-15
高德地图的 React 实现
基于umi+antd-mobile的移动端项目模板
02-22
基于umi+antd-mobile的移动端项目模板
umi-electron-template:海米电子模板
03-07
海米电子模板 一个基于和的开发模板 特性 架构 基于，享受完整的开发生态； 采用打包工具； 使用Main与Renderer双目录架构； 基于实现DI / IoC 内置功能 样式框架：集成 ； 数据持久化：集成作为本地数据库， 作为...
umi+dva+hooks+高德地图的三级区域至店铺的地图切换及搜索组件
weixin_43831820的博客
09-04 894
创建react项目 umi具有移动端高清适配等插件，在做移动端项目的时候可以省很多事，项目创建好了以后运行起来
react-amap使用地图控件，默认卫星图并隐藏控件方法(umi)
aaaadioppa的博客
11-18 1065
在使用react-amap高德地图时遇到一个问题，就是如何设置默认卫星地图且不显示地图类型切换插件 我的初始设置方式 <Map plugins={[{ name: 'MapType', options: { defaultType: 1, visiable:false, }, }]} /&g.
大屏可视化布局(地图颜色--高德)
m0_71955188的博客
11-29 302
【代码】大屏可视化布局(地图颜色--高德)
React手机端如何在umi框架如何自定义 HTML 模板
KisJLLLLLL的博客
02-15 852
React手机端如何在umi框架如何自定义 HTML 模板
umi4怎么配置高德地图的秘钥，
06-09
要在umi4中配置高德地图的密钥，需要进行以下步骤： 1. 在高德地图开放平台上注册账号并创建应用，获取地图API Key。 2. 在你的umi项目的根目录下创建`.env`文件，并在里面添加以下代码： ``` AMAP_KEY=你的地图API Key ``` 3. 在你的umi项目中的`.umirc.ts`或者`.config.js`文件中，配置`define`选项，使得环境变量能够在代码中被访问到，例如： ```javascript export default { define: { 'process.env.AMAP_KEY': process.env.AMAP_KEY || '', }, // 其他umi配置项 } ``` 4. 在你的umi项目中使用高德地图组件时，将`amapkey`属性设置为环境变量`process.env.AMAP_KEY`，例如： ```javascript import { Map } from 'react-amap'; const MyMapComponent = () => ( <Map amapkey={process.env.AMAP_KEY} // 其他地图组件的配置项 /> ); export default MyMapComponent; ``` 这样你就可以在umi4中成功配置高德地图的密钥了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值