时间戳

首页 > 解决方案 > 谷歌地图（参考错误：谷歌未定义）

javascript - 谷歌地图（参考错误：谷歌未定义）

问题描述

我在我的网站中使用谷歌地图的 API 来显示几个位置。谷歌地图工作正常。但是当我想计算纬度和经度之间的距离时，我得到了这个错误（ReferenceError: google is not defined）

home.component.ts

import { Component, OnInit } from '@angular/core';
declare var google: any;
@Component({

selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']

})
export class HomeComponent implements OnInit {



location: Location
selectedMarker: Marker
origin: any;
destination: any;
distance: String;



ngOnInit(){


this.distance = this.calculateDistance(this.origin, this.destination);



this.origin = { 
  lat: 32.6950, 
  lng: 35.2820 
};
this.destination = { 
  lat: 32.6050, 
  lng: 35.2020 
};

this.location = {
  latitude: 32.6950,
  longitude: 35.2820,
  zoom: 15,
  markers: [
      {
          lat: 32.6950,
          lng: 35.2820
      }
  ]
  }



 this.loadScript('assets/js/jquery-3.3.1.min.js');
 this.loadScript('assets/vendors/appear/jquery.appear.min.js');
 this.loadScript('assets/vendors/jquery.easing/jquery.easing.min.js');
 this.loadScript('assets/js/popper.min.js');
 this.loadScript('assets/js/bootstrap.min.js');
 this.loadScript('assets/vendors/common/common.min.js');
 this.loadScript('assets/vendors/fancybox/jquery.fancybox.min.js');
 this.loadScript('assets/vendors/menu/src/main.menu.js');
 this.loadScript('assets/vendors/owl.carousel/owl.carousel.min.js');
 this.loadScript('assets/vendors/animated-headline/js/animated-headline.js');
 this.loadScript('assets/js/main.js');
 this.loadScript('assets/js/theme.init.js');
 this.loadScript('assets/js/custom.js');


 }

 public loadScript(url: string) {
 const body = <HTMLDivElement> document.body;
 const script = document.createElement('script');
 script.innerHTML = '';
 script.src = url;
 script.async = false;
 script.defer = true;
 body.appendChild(script);
 }


addMarker(lat: number, lng: number) {
this.location.markers.push({
    lat,
    lng
 })
 }

selectMarker(event) {
this.selectedMarker = {
    lat: event.latitude,
    lng: event.longitude
 }
 } 


calculateDistance(point1, point2) {


const p1 = new google.maps.LatLng(
point1.lat,
point1.lng
);
const p2 = new google.maps.LatLng(
point2.lat,
point2.lng
);

return (
google.maps.geometry.spherical.computeDistanceBetween(p1, p2)/1000
).toFixed(2);
}


}

interface Marker {
lat: number;
lng: number;
}

interface Location {
latitude: number;
longitude: number;
zoom: number;
markers: Array<Marker>;
}

home.component.html

<agm-map [latitude]="location.latitude" [longitude]="location.longitude" 
[zoom]="location.zoom" (mapClick)="addMarker($event.coords.lat, $event.coords.lng)">
<!-- ... -->
<agm-direction 
    [origin]="origin" 
    [destination]="destination"
></agm-direction>
</agm-map>
<div>
 Distance: {{distance}}
 </div>
 <!-- ... -->

只有它说：ReferenceError: google is not defined

有没有人熟悉这样的问题？

标签： javascriptangulartypescriptapi

解决方案

尝试

  1. 在 index.html 中，

    < script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key={your_key_here}" 异步延迟>

  2. 包括googlemaps在types_tsconfig.app.json

例子：

 {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "googlemaps"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

推荐阅读