Angular 2：多个包含错误

我尝试构建基于Angular 2框架的Ionic 2应用程序。我必须在页面中显示地图。我用这个： https://angular-maps.com/guides/getting-started/Angular 2：多个包含错误

它的工作原理很好，但我有这个错误在我的控制台：

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

其实，我用几何谷歌图书馆在一个组件来演算了一些时间旅行。所以，我有我的index.html包含此：

<script src="https://maps.google.com/maps/api/js?sensor=true&key=MYAPIKEY&libraries=geometry"></script>

如果我删除，我没有我的错误我在我的地图页面，但我不能使用图书馆演算距离我的供应商..

有人可以解释我如何使用这两个功能？

我的供应商代码来演算距离：

//this line doesn't works if I remove my script from my index.html 
let origin = new google.maps.LatLng(user.latitude, user.longitude); 
    let service = new google.maps.DistanceMatrixService(); 
     service.getDistanceMatrix(
      { 
       origins: [origin], 
       destinations: destinations, 
       travelMode: 'DRIVING', 
      }, res =>{ 
       if(res.rows[0]) { 
        for(let i: number = 0; i < res.rows[0].elements.length ; i++) { 
         let element: any = res.rows[0].elements[i]; 
         objects[i].distance = element.distance.text; 
         objects[i].time_travel = element.duration.text; 
        } 
       } 
      });

来源

2017-09-06 V. Pivet

由于谷歌地图API的脚本是由添加' @ agm/core'，同时调用map指令，在索引文件中添加maps api reference是多余的。这是上述错误的原因。

所以，请做如下修改

在你的组件

类进口MapsAPILoader

import { AgmCoreModule, MapsAPILoader } from '@agm/core';

添加下面的代码的应用程序组件构造

constructor(private _loader:MapsAPILoader) 
{ 
    _loader.load().then(() => { 
    console.log('google script loaded'); 
}); 

}

最后从索引中删除地图脚本文件。

来源

2017-09-06 08:32:39 nikhila

完成。但是当我的几何函数被调用时，我保留一个错误：Error：Uncaught（在promise中）：ReferenceError：google没有定义 ReferenceError：google没有定义 –

@ V.Pivet更新了答案。请检查并让我知道。 – nikhila

我做了您的修改，我有一次在我的控制台中登录。我不再犯我的错误了。 –

AGM提供了一种方法载入地图上自己使用MapsAPILoader

import { MapsAPILoader } from '@agm/core'; 
    ... 
    this.mapsLoader.load().then(() => { 
     console.log('maps loaded'); 
    });

来源

2017-09-06 08:20:40 misha130

Angular 2：多个包含错误

回答

相关问题