角度2：包含多个错误

Question

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

它工作正常，但我的控制台出现此错误：

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

实际上，我在组件中使用Google几何库来计算一些时间。 所以我将其包含在我的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;
                    }
                }
            });

Answer 1

AGM提供了一种使用MapsAPILoader自行加载地图的方法

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

Answer 2

由于Google Maps api脚本是在调用map指令时由“ @ agm / core”添加的，因此在索引文件中添加maps api引用是多余的。 这就是上述错误的原因。

因此，请进行以下更改

在您的组件类中导入MapsAPILoader

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

在应用程序组件构造器中添加以下代码

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

}

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