使用 AngularJS 动态加载 Google 地图 API

2024-05-22

我正在尝试使用 AngularJS 加载 Google Maps API:

<html data-ng-app="search-app">
<head data-ng-controller="GoogleMaps">
    <script ng-src="{{mapsUrl}}" type="text/javascript"></script>
....
</head>

以及该部分的控制器:

search.controller('GoogleMaps', [
    '$scope','$sce',
    function GoogleMaps($scope,$sce) {
        var mapsUrl = '//maps.google.com/maps/api/js?sensor=false&key=my_api_key';
        $scope.mapsUrl = $sce.trustAsResourceUrl(mapsUrl);
    }
]);

但是当在搜索控制器中调用 Google Map API 时,它会抛出错误

this.setMap 不是一个函数

for

function CustomMarker(latlng, map, args) {
    this.latlng = latlng;
    this.args = args;
    this.setMap(map);
}

但当我要更换时{{mapsUrl}}在 HTML 标头中包含完整的 URL 就可以了。

对此有什么想法吗?


我最终将 URL 作为加载事件的脚本附加到标头

function require(url, callback)
{
    var element = document.createElement("script");
    element.src = url;
    element.type="text/javascript";
    element.addEventListener('load', callback);
    document.getElementsByTagName("head")[0].appendChild(e);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 AngularJS 动态加载 Google 地图 API 的相关文章

随机推荐

  • 如何使用“子例程引用”作为哈希键

    在 Perl 中 我正在学习如何取消引用 子例程引用 但我似乎无法使用子例程引用作为哈希 键 在下面的示例代码中 我可以创建对子例程 subref 的引用 然后取消引用它以运行子例程 subref 我可以使用引用作为哈希 值 然后轻松取消引
  • 如何同时将透镜(或任何其他光学器件)视为吸气剂和设置剂?

    我正在尝试编写一个通用记录更新程序 它允许人们轻松更新记录中的字段existing记录 字段形状相似incoming记录 这是我到目前为止所拥有的 applyUpdater fields existing incoming let gett
  • 宏观评价[重复]

    这个问题在这里已经有答案了 可能的重复 未定义的行为和序列点 https stackoverflow com questions 4176328 undefined behavior and sequence points 我无法理解以下宏
  • unicode().decode('utf-8', 'ignore') 引发 UnicodeEncodeError

    这是代码 gt gt gt z u u2022 decode utf 8 ignore Traceback most recent call last File
  • Android 布局以 开头 [重复]

    这个问题在这里已经有答案了 我是 Android 应用程序开发的初学者 我的问题很简单 我似乎无法确定布局文件夹中的 xml 文件是否应以以下开头 当我制作一个入门项目时 它不存在 但我也在读一本书 上面说它应该在那里 正确的方法是什么 嗯
  • 加入语音频道(discord.py)

    当我尝试让我的机器人加入我的语音频道时 出现以下错误 await client join voice channel voice channel 产生错误的行 Traceback most recent call last File usr
  • 如何进行有条件的 .htaccess 密码保护

    我正在尝试使用 htaccess 对特定网址进行密码保护 不同的 url 指向相同的文件 但工作方式不同 我现在只需要用密码保护一个网址 我正在尝试使用 setenvif 来执行此操作 但它似乎不起作用 我可能不完全理解 apache se
  • 具有动态 apache vhost 的非通配符证书

    我正在尝试根据用于连接到我的服务器的 url 动态读取 SSL 证书的位置 我尝试了几种不同的方法 但似乎都不起作用 目前我的配置如下所示 UseCanonicalName Off listen 443
  • 检测未定义的对象属性

    如何检查 JavaScript 中的对象属性是否未定义 检查属性值是否为特殊值的常用方法undefined is if o myProperty undefined alert myProperty value is the special
  • php laravel Blade 模板不渲染

    我正在尝试使用 Laravel 和 twitter bootstrap 设置一个基本页面 我安装了 Laravel 并获得了通用的 你在这里 或 w e 图像 这样看起来很闪亮 对于 twitter bootstrap 我在 public
  • Visual Studio代码无法检测到模拟器设备或连接的电话

    I was running my app with vscode using Android emulator or my phone however all of a sudden vscode could not identify an
  • 如何在 MVEL for / foreach 循环中中断或继续

    我看到 MVEL 支持 for 循环和 foreach 模板 但如何从循环中 中断 或 继续 文档中没有提及对 中断 或 继续 的支持 http mvel codehaus org MVEL 2 0 Control Flow http mv
  • Visual Studio 2015 中的 React 没有智能感知

    我没有看到任何 ReactJS 的智能感知 例如像这样的方法React createClass虽然我看到 references js文件位于根文件夹 这 references js文件有各种 React js 文件的帮助参考 我的react
  • 带孔的世界地图多边形(谷歌地图)

    我正在尝试绘制一个带孔的矩形多边形 我的问题是我无法创建一个覆盖整个世界的多边形 多边形被反转 以便仅选择一条线而不是整个世界 下面是我能够做出的最大选择的示例 例如 如果我尝试更改 0 在 new google maps LatLng 8
  • 键盘滑回后 UIPopoverController 未移至原始位置

    我正在 iPad 中显示带有 UINavigation 栏的弹出框 在第二个视图中 我有一个可以显示键盘的 UISearchController 键盘将弹出窗口向上推 这很好 但是如果我现在按下 UINavigation 栏上的 后退 按钮
  • 渐变方向从左到右

    我完全被这个问题难住了 它应该如此简单 以至于让我发疯 我正在使用这个苹果反射教程 苹果反射示例 http developer apple com library ios samplecode Reflection Listings MyV
  • Django中的自动递增值

    我在 django 中有一个表并尝试自动递增它的序列号 在自定义模板中 for 循环用于变量 自定义模板 for i in getodeskview tr td 1 td td i odesk id td td i hours td td
  • 动态 jquery 对话框弹出窗口

    我只使用过已知数量的 JQuery 对话框 并且在使动态版本正常工作时遇到了各种麻烦 希望有人能帮助我解决这个问题 这是我用已知数字执行此操作的方法 opener1 click function dialog1 dialog open di
  • 如何从 Pandas DataFrame 转换为 Tensorflow BatchDataset 以进行 NLP?

    老实说 我想弄清楚如何转换数据集 格式 pandasDataFrame或 numpy 数组 转换为简单文本分类张量流模型可以训练用于情感分析的形式 我使用的数据集类似于 IMDB 包含文本和标签 正面或负面 我看过的每个教程要么以不同的方式
  • 使用 AngularJS 动态加载 Google 地图 API

    我正在尝试使用 AngularJS 加载 Google Maps API 以及该部分的控制器 search controller GoogleMaps scope sce function GoogleMaps scope sce var