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.

事实上，我在组件中使用几何谷歌库来计算一些时间旅行。所以我在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

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

所以请进行以下更改

组件类中的

导入MapsAPILoader

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

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

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

}

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

角度2：多个包含的错误

2 个答案: