如何根据Angular中的输入坐标在agm地图中绘制多边形

Question

我想根据输入框中输入的坐标在谷歌地图中绘制一个多边形。

在输入框中输入坐标集后，一旦我点击绘制多边形按钮，我想在谷歌地图(agm地图(中绘制一个多边形。

请帮忙。

Answer 1

在回答您的问题之前，需要注意的一点是Stack Overflow不是一个免费的代码编写服务。您应该尝试自己编写代码。在做了更多的研究之后，如果你有问题，你可以发布你所尝试的，并清楚地解释什么不起作用，并提供一个最小、完整和可验证的例子。我建议阅读《如何提出一个好问题和一个完美的问题》。此外，一定要参观阅读这个

话虽如此，而不是依赖第三方库(AGM(，你实际上可以在Angular上原生地实现谷歌地图API。这样，一旦初始化MapsJS API，您就可以按照官方文档进行操作。这应该会让你省去很多头疼的事情，而不是遵循不可预测的第三方文档。

以下是一个符合您要求的示例代码：https://stackblitz.com/edit/angular-draw-polygon

你也可以看到下面的代码：

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<my-app>loading</my-app>

mapComponent.html

longitude: <input placeholder="longitute" name="longitute" [(ngModel)]="longitute" required >
<h2>Coordinates:</h2>
<ul>
<li *ngFor="let coordinate of coordinates">
{{ coordinate.lat }},{{coordinate.lng}}
</li>
</ul>
<button type="submit" (click)="onAdd()">Add coordinates</button>
<button type="submit" (click)="onSubmit()">Draw Polygons</button>
<div #map class="map"></div>

mapComponent.ts

import { Component, OnInit, ViewChild } from "@angular/core";
declare const google: any;
@Component({
selector: "my-maps",
templateUrl: "./simple-map.component.html",
styleUrls: ["./simple-map.component.css"]
})
export class MapComponent implements OnInit {
@ViewChild("map", { static: true }) mapElement: any;
map: any;
latitude: number;
longitute: number;
coordinates = [];
constructor() {}
ngOnInit() {
const mapProperties = {
center: new google.maps.LatLng(-33.8569, 151.2152),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(
this.mapElement.nativeElement,
mapProperties
);
}
onAdd() {
var stringToJson = JSON.parse(
'{"lat":' + this.latitude + "," + '"lng":' + this.longitute + "}"
);
this.coordinates.push(stringToJson);
this.latitude = null;
this.longitute = null;
}
onSubmit() {
const polygon = new google.maps.Polygon({
paths: this.coordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
polygon.setMap(this.map);
// Create the bounds object
var bounds = new google.maps.LatLngBounds();
// Get paths from polygon and set event listeners for each path separately
polygon.getPath().forEach(function(path, index) {
bounds.extend(path);
});
console.log(bounds);
// Fit Polygon path bounds
this.map.fitBounds(bounds);
}
}

style.css

height: 100%;
margin: 0;
padding: 0;
}
.map {
height:100%;
}