在 Electron 应用中,通过 <script> 标签引入百度地图在线 SDK 时报错

在 Electron 应用中,通过 “script ”标签引入百度地图在线 SDK 时报错,或者vue、react等其他在线资源报错时以下方法都适用。

问题现象:electron中使用百度地图的JavaScript api 脚本,得到对象BMapGL,调用getCurrentPosition会报错:Uncaught ReferenceError: md5 is not defined

经过多次验证与测试,找到了问题原因:是由于electron环境中创建的窗口设置了webPreferences中的nodeIntegration: true,使得浏览器环境集成了nodejs,影响了getscript的执行。关闭它就可以了。但是一般情况下这个开关不能关闭,项目代码中渲染进程严重依赖于nodejs部分模块,在index.html加上以下两句代码即可以解决

<html>
 
 
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>  //开头
 
 <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=jdshiwhfdio54wsdwqa">
    </script>
............................//这里写你要引入的jQuery/Vuejs/angularjs包等等..
............................//你的代码
<script src=""></script>    //自己的外部js代码
 
 
<script>if (window.module) module = window.module;</script>  //结尾
 
 
</html>

主要就是开头结尾两句话,大神操作,具体解决的原因不是很了解,但确实不加就会报错,加了就好用了

原文档地址:https://blog.csdn.net/xxhdcblogzh888/article/details/78106347

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron 框架下使用 TypeScript 并不影响在 HTML 页面使用条件语句。你可以在 HTML 使用 `ngIf` 或者 `*ngIf` 来实现条件语句。 具体来说,你可以在 HTML 使用 `ngIf` 来控制两个 `<div>` 之间的内容是否显示。示例代码如下: ```html <div *ngIf="showContent"> 这里是要显示的内容。 </div> <div *ngIf="!showContent"> 这里是要隐藏的内容。 </div> ``` 在 TypeScript ,你需要定义一个 `showContent` 变量,并在控制器设置它的值,来控制两个 `<div>` 间的内容是否显示。示例代码如下: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'my-component', templateUrl: './my-component.component.html', }) export class MyComponent { showContent = true; // 默认显示内容 toggleContent() { this.showContent = !this.showContent; } } ``` 在上面的示例代码,我们定义了一个 `showContent` 变量,并初始化为 `true`,表示要显示内容。同时,我们还定义了一个 `toggleContent()` 方法,用来切换 `showContent` 变量的值,从而控制两个 `<div>` 间的内容的显示和隐藏。 在 HTML ,我们使用 `*ngIf` 来根据 `showContent` 变量的值来显示或隐藏两个 `<div>` 间的内容。如果 `showContent` 为 `true`,则显示第一个 `<div>` 的内容;如果 `showContent` 为 `false`,则显示第二个 `<div>` 的内容。在控制器,我们可以通过调用 `toggleContent()` 方法来切换 `showContent` 的值,从而实现内容的显示和隐藏。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值