ReferenceError: google is not defined on using PrimeNG GMap
ReferenceError: google is not defined on using PrimeNG GMap
我在项目中使用 PrimeNg GMap,但出现错误 "ReferenceError: google is not defined"
我正在关注此 link 以获取文档 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>
您需要下载并使用 google.maps javascript 库。请参阅文档:https://developers.google.com/maps/documentation/javascript/tutorial
PrimeNG 组件只是 Angular 地图 javascript 库的薄 Angular 包装器。
PrimeNG 文档在这方面不是很好,但查看 GitHub 存储库有所帮助。尝试将 google API 脚本添加到 Index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE"></script>
请注意,您需要添加自己的 api 密钥。
另请注意,我删除了延迟异步,因为在直接加载页面时这会导致错误。
您的代码需要在组件之上声明 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})
]; }
使用有效的 google 密钥在 index.html 文件中添加此脚本。
<script src="https://maps.googleapis.com/maps/api/js?key="GOOGLE_MAP_KEY">
</script>
我在项目中使用 PrimeNg GMap,但出现错误 "ReferenceError: google is not defined" 我正在关注此 link 以获取文档 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>
您需要下载并使用 google.maps javascript 库。请参阅文档:https://developers.google.com/maps/documentation/javascript/tutorial
PrimeNG 组件只是 Angular 地图 javascript 库的薄 Angular 包装器。
PrimeNG 文档在这方面不是很好,但查看 GitHub 存储库有所帮助。尝试将 google API 脚本添加到 Index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE"></script>
请注意,您需要添加自己的 api 密钥。
另请注意,我删除了延迟异步,因为在直接加载页面时这会导致错误。
您的代码需要在组件之上声明 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})
]; }
使用有效的 google 密钥在 index.html 文件中添加此脚本。
<script src="https://maps.googleapis.com/maps/api/js?key="GOOGLE_MAP_KEY">
</script>