ionic4 - 每次页面加载时都会调用谷歌地图的脚本
问题描述
谷歌地图的脚本 src(api key) 应该只在页面加载时加载一次
索引.html
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=apikey" async= "true"></script>
.ts 文件
const script = document.createElement('script');
script.id = 'googleMap';
console.log(script,'script')
if (this.apiKey) {
script.src = 'https://maps.googleapis.com/maps/api/js?key=' +
this.apiKey;
console.log(script.src,'script.src')
}
else {
script.src = 'https://maps.googleapis.com/maps/api/js?key=';
}
document.head.appendChild(script);
解决方案
如果您已经将 .ts 文件中的片段手动放置在主 html 文件中,那么您在 .ts 文件中有什么用途?
尝试删除它。
如果不是,请提供有关您的const script =...
代码段在应用程序中实际位置的更多详细信息。它必须在不止一次被调用的地方?
更新
根据您的评论,您说您已经删除了您发布的脚本示例,但它仍然多次包含它。
这听起来像你没有把你<script>
的标签放在你的<head>
标签里。如果它在重复的东西里面,那么它就会重复。
如果这不能解决您的问题,那么请改写您的问题以包括更好的片段和更清晰的当前设置,否则我们只能猜测它可能是什么。
推荐阅读
- google-bigquery - 在 bigquery 中使用 RANGE_BUCKET 时如何显示存储桶名称
- dialogflow-es - 是否可以将我的 DialogFlow 代理部署到多个松弛工作区?
- javascript - React,Material UI,Select,disableScrollLock,使菜单位置相对于锚点
- r - Lubridate 在 R 中将日期放在未来
- python - 删除熊猫字符串类型系列中所有不是数字的字符
- r - 仅将 as.numeric 映射到数据框的特定列
- python - Pandas: How create columns where sum other columns based on conditional of other column values?
- ruby-on-rails - How to compre DateTime with generic times in ruby
- react-native - 如何使用 Parse-Server 后端修复 React Native 上的“错误:XMLHttpRequest 失败”
- survey - 在 Qualtrics 中,如何在给出响应之前隐藏滑块不显示?