ReferenceError：使用 PrimeNG GMap 时未定义 google

Posted 2023-03-13

【中文标题】ReferenceError：使用 PrimeNG GMap 时未定义 google

【英文标题】：ReferenceError: google is not defined on using PrimeNG GMap

【发布时间】：2017-10-11 10:27:39

【问题描述】：

我在我的项目中使用 PrimeNg GMap，但出现错误“ReferenceError: google is not defined” 我正在关注此链接以获取文档https://www.primefaces.org/primeng/#/gmap。请告诉我如何为 GMap 添加 api 密钥。 error image

我的组件

import GMapModule from 'primeng/primeng';

@Component(
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',

 [)
 export c][1]lass MyComponent  implements OnInit 

options: any;

overlays: any[];

ngOnInit() 
    this.options = 
        center: lat: 36.890257, lng: 30.707417,
        zoom: 12
    ;

    this.overlays = [
        new google.maps.Marker(position: lat: 36.879466, lng: 30.667648, title:"Konyaalti"),
        new google.maps.Marker(position: lat: 36.883707, lng: 30.689216, title:"Ataturk Park"),
        new google.maps.Marker(position: lat: 36.885233, lng: 30.702323, title:"Oldtown"),
        new google.maps.Polygon(paths: [
            lat: 36.9177, lng: 30.7854,lat: 36.8851, lng: 30.7802,lat: 36.8829, lng: 30.8111,lat: 36.9177, lng: 30.8159
        ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
        ),
        new google.maps.Circle(center: lat: 36.90707, lng: 30.56533, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500),
        new google.maps.Polyline(path: [lat: 36.86149, lng: 30.63743,lat: 36.86341, lng: 30.72463], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2)
    ];

HTML代码

<p-gmap [options]="options" [overlays]="overlays" [style]="'width':'100%','height':'320px'" ></p-gmap>

【问题讨论】：

请点击 PrimeFaces 标签，阅读有关它的文字，你使用它吗？ （提示：PrimeNG != PrimeFaces 所以你需要更正标记）

【参考方案1】：

PrimeNG 文档在这方面不是很好，但查看 GitHub 存储库有所帮助。尝试将 google API 脚本添加到 Index.html：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE"></script>

请注意，您需要添加自己的 api 密钥。

另请注意，我删除了延迟异步，因为直接加载页面时会导致错误。

【参考方案2】：

您需要下载并使用 google.maps javascript 库。请参阅文档：https://developers.google.com/maps/documentation/javascript/tutorial

PrimeNG 组件只是谷歌地图 javascript 库的一个瘦 Angular 包装器。

【讨论】：

感谢您的帮助:)

【参考方案3】：

在 index.html 文件中使用有效的 google 密钥添加此脚本。

<script src="https://maps.googleapis.com/maps/api/js?key="GOOGLE_MAP_KEY">
</script>

【参考方案4】：

您的代码需要在组件顶部声明 declare var google: any; 它将为您工作。

import GMapModule from 'primeng/primeng';   
declare var google: any; //new added line 

@Component(   
    selector: 'mycomponent',   
    templateUrl: './mycomponent.component.html',  
)
export class MyComponent  implements OnInit 

    options: any;
    overlays: any[];

    ngOnInit() 
        this.options = 
            center: lat: 36.890257, lng: 30.707417,
            zoom: 12
        ;

    this.overlays = [
        new google.maps.Marker(position: lat: 36.879466, lng: 30.667648, title:"Konyaalti"),
        new google.maps.Marker(position: lat: 36.883707, lng: 30.689216, title:"Ataturk Park"),
        new google.maps.Marker(position: lat: 36.885233, lng: 30.702323, title:"Oldtown"),
        new google.maps.Polygon(  
            paths: [
                lat: 36.9177, lng: 30.7854,lat: 36.8851, lng: 30.7802,lat: 36.8829, lng: 30.8111,lat: 36.9177, lng: 30.8159
            ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
        ),
        new google.maps.Circle(center: lat: 36.90707, lng: 30.56533, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500),
        new google.maps.Polyline(path: [lat: 36.86149, lng: 30.63743,lat: 36.86341, lng: 30.72463], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2)
    ];