大家下午好！我正在用谷歌地图API构建一个有角度的应用程序，它可以获取用户的当前位置，然后显示离他们最近的20家咖啡店。在尝试实现更改之前，我已经找到了一些要实现的测试代码。然而，无论我做什么，我都会在登录页上不断出现404错误。我已经被这个问题困扰了好几天，我在任何地方都找不到答案。有人知道我做错了什么吗？有人知道附近的谷歌地图(Angular(搜索教程吗？我真的被困在这里了。提前感谢各位。
编辑：1-我也在CLI上运行了npm I@types/googlemaps！component.html上的一个错误来自未识别的清理。
文件路径显示模型和组件
浏览器上显示的图片
user-landing-page.component.html
<div class="page-container">
<div class="slider-container">
<div class="external-neighbourhood">
<div class="heading" style="margin-left: 1rem;">
<h5>NEIGHBORHOODS</h5>
</div>
<div class="no-image" *ngIf="neighbourhoodPlaces.length===0">No Images</div>
<div class="neighbourhood" *ngIf="neighbourhoodPlaces.length>0">
<div id="pnProductNav" class="wrapper-container">
<div id="pnProductNavContents" class="pn-ProductNav_Contents places-container" *ngFor="let place of neighbourhoodPlaces">
<div class="dest-card" [style.background-image]="sanitization.bypassSecurityTrustStyle('url('+ place.placePhoto + ')')">
<div class="content-container">
<div class="place-name">{{place.placeName}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="map"></div>user-landing-page.component.ts
import { Component, OnInit } from '@angular/core';
import { Place } from 'src/app/models/place';
@Component({
selector: 'app-user-landing-page',
templateUrl: './user-landing-page.component.html',
styleUrls: ['./user-landing-page.component.css']
})
export class UserLandingPageComponent implements OnInit {
// For longitude west, give in negative, for East, give in positive number.
lat = 40.7127753;
lng = -74.0059728;
// loading: Boolean = true;
neighbourhoodPlaces: Array<Place> = [];
constructor() {
this.neighbourhoodPlaces = new Array<Place>();
}
ngOnInit(): void {
this.fetchNeighbourhood();
}
fetchNeighbourhood = () => {
let map;
let neighbourhoodService;
const loc = new google.maps.LatLng(this.lat, this.lng);
map = new google.maps.Map(document.getElementById('map'), {
center: loc,
zoom: 15
});
const neighbourhoodRequest = {
location: loc,
radius: '1500',
type: ['neighborhood', 'art_gallery', 'museum', 'zoo']
};
neighbourhoodService = new google.maps.places.PlacesService(map);
neighbourhoodService.nearbySearch(neighbourhoodRequest, (this.neighbourhoodCallback).bind(this));
}
neighbourhoodCallback = (results, status) => {
let count = 0;
results.forEach(element => {
if (element.photos && count < 8) {
count++;
const newDest: Place = {
placeName: element.name,
placePhoto: (element.photos) ? element.photos[0].getUrl() : undefined
};
this.neighbourhoodPlaces.push(newDest);
}
});
}
}main index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgClusterCafe</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&language=en">
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>tsconfig.app.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["googlemaps"]
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}使用@types/googlemaps可能不是最好的方法，因为我在经验中遇到了很多问题。下面是一个本地使用附近地方搜索的示例，因此您可以使用谷歌地图API官方文档。然后您可以使用HTML5地理位置来获取当前位置。谷歌地图也有一个使用此功能的示例：https://developers.google.com/maps/documentation/javascript/geolocation?hl=en
注意：除了替换index.html文件中的API密钥占位符外，您可能会遇到未定义Google命名空间的情况。这是Stacklitz本身的一个问题，只需在任何地方放一个空格就可以很容易地解决。在本地实现时不会发生这种情况。
链接：https://stackblitz.com/edit/angular-nearby-search-micl24
nearbySearch.component.ts
import { Component, OnInit, ViewChild } from "@angular/core";
import { types } from './types/supportedTypes';
import { type } from './types/types';
declare const google: any;
@Component({
selector: "my-maps",
templateUrl: "./nearbySearch.component.html",
styleUrls: ["./nearbySearch.component.css"]
})
export class MapComponent implements OnInit {
@ViewChild("map", { static: true }) mapElement: any;
map: any;
latLng:string;
radius:string;
service;
listOfTypes: type[] = types;
infowindow;
markers=[];
types;
bounds;
constructor() {}
ngOnInit() {
const mapProperties = {
center: { lat: -33.8569, lng: 151.2152 },
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(
this.mapElement.nativeElement,
mapProperties
);
}
onSubmit() {
this.nearbySearch(this.latLng);
}
nearbySearch(latLng) {
var latlngStr = this.latLng.split(',', 2);
var latLngObj= {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
this.bounds = new google.maps.LatLngBounds();
var request = {
location: latLngObj,
radius: this.radius,
type: this.types
};
var service = new google.maps.places.PlacesService(this.map);
service.nearbySearch(request, (results, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
this.createMarker(results[i]);
}
this.map.fitBounds(this.bounds);
}
});
}
createMarker(place) {
this.infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: this.map,
position: place.geometry.location
});
this.markers.push(marker);
marker.addListener('click', () =>{
this.infowindow.setContent(place.name);
this.infowindow.open(this.map, marker);
});
this.bounds.extend(marker.position);
}
}
nearbySearch.component.html
<h1 >Places API - Nearby Search: </h1>
<b>Lat/ Lng: </b> <input placeholder="latitude, longitude" name="latLng" [(ngModel)]="latLng" required ><br/>
<b>Radius: </b> <input placeholder="<=50 000" name="radius" [(ngModel)]="radius" required ><br/>
<b>Type: </b>
<select name="types" [(ngModel)]="types">
<option *ngFor="let type of listOfTypes" [value]="type.value">{{type.name}}</option>
</select>
<button type="submit" (click)="onSubmit()">Submit</button>
<div #map class="map"></div>
index.html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<my-app>loading</my-app>