angularjs - styled - 谷歌地图api中国




TypeError:window.initMap不是函数 (12)

我正在按照本教程,基本上复制所有代码

https://developers.google.com/maps/documentation/javascript/tutorial

但得到一个错误,说initMap函数不是一个函数。 我在我的项目中使用angularjs,这可能导致问题吗?

我将相同的代码复制到plunker中,它工作得很好......有什么可能的问题?


事实证明它与 ng-Route 并且加载脚本的顺序编写了一个指令,并将API脚本置于一切工作之上。


可能是你的initMap函数在$(document).ready函数中。 如果是,那么它将无法工作,它必须在任何其他功能之外。


在调用google api之前,在“”标记或加载javascript文件之间创建initMap方法。

<script src="Scripts/main.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=abcde&libraries=places&callback=initMap" async defer></script>


在过去几个月的问题中,我一直在努力奋斗好几天 - “initMap不是一个功能”。

这两个线程帮助了我:

  1. 如何在Web应用程序的单独文件中回调Google Maps init

  2. Defer属性不适用于Google Maps API?

为什么地图有时打开,有时不打开。 这取决于几个因素,如连接速度,环境等。因为初始化功能有时在谷歌地图API启动后运行,这就是为什么地图不显示和浏览器控制台抛出错误。 对我来说,仅删除异步属性修复了问题。 延迟属性保持不变。

如果存在异步:脚本与页面的其余部分异步执行(脚本将在页面继续解析时执行)如果不存在异步并且存在延迟:脚本在页面完成解析后执行If既不存在异步也不存在延迟:在浏览器继续解析页面之前立即获取并执行脚本源 - http://www.w3schools.com/tags/att_script_defer.asp

希望有所帮助。 干杯。


就我而言,我解决了这个问题:

function initMap() {
    if($('#map').length > 0) {
        // your code
    }
}

您的回叫方法可能无法全局访问。 在我的情况下,我通过webpack使用了传输的ES6代码,这导致我的回调方法不再是全局的。

尝试在回调方法声明后立即将回调方法显式附加到 window 并查看结果

window.initMap = initMap;

它对我有用。


我有类似的错误。 这里的答案帮助我弄清楚该怎么做。

的index.html

 <!--The div element for the map -->
 <div id="map"></div>

<!--The link to external javascript file that has initMap() function-->
 <script src="main.js">

<!--Google api, this calls initMap() function-->
 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYWY&callback=initMap">
</script>

main.js //这给出了错误


// The initMap function has not been executed
const initMap = () => {
const mapDisplayElement = document.getElementById('map');
  // The address is Uluru
const address = {lat: -25.344, lng: 131.036};
  // The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom,and displays the entire earth.
const map = new google.maps.Map(mapDisplayElement, { zoom: 4, center: address });
const marker = new google.maps.Marker({ position: address, map });
};

这里的答案帮助我找到了解决方案。 我使用了一个立即调用函数( IIFE )来解决它。

错误是在调用google maps api时,initMap()函数尚未执行。

main.js //这个有效

const mapDisplayElement = document.getElementById('map');
// The address is Uluru
// Run the initMap() function imidiately, 
(initMap = () => {
  const address = {lat: -25.344, lng: 131.036};
  // The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom,and displays the entire earth.
  const map = new google.maps.Map(mapDisplayElement, { zoom: 4, center: address });
  const marker = new google.maps.Marker({ position: address, map });
})();

我正在使用React,我在脚本中提到了&callback = initMap,如下所示

<script 
src="https://maps.googleapis.com/maps/api/js? 
key=YOUR_API_KEY&callback=initMap">
</script>

然后只是删除了 &callback=initMap 部分,现在没有像window.initMap这样的错误在控制台中不是一个函数。


该问题与脚本标记中的async属性有关。 回调函数在请求完成时它确实不存在时尝试调用“initMap()”。

为了解决这个问题,我将Goole Maps Api脚本放在我声明initMap函数的脚本下面。

希望这可以帮助


这似乎是显而易见的,但以防万一:如果有人将JS代码放在$(document).ready中,就像这样:

     $(document).ready(function() {
       ... Google Maps JS code ...
      }

那就是问题所在,因为在加载Google Maps API库时使用 async defer ,它将异步加载,当它完成加载时,将查找回调函数,该函数需要在当时可用。

所以,你只需要将代码 放在 $(document).ready之外 ,并且:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

在最底部,所以你的页面加载速度:-)


除了@ DB.Null的答案之外,我使用 Function.prototype 作为#3上的no-op(无操作)函数而不是 angular.noop (我的项目中没有角度)。

所以这...

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=Function.prototype" type="text/javascript"></script>


=initMap 为我工作:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback"></script>






google-maps-api-3