Angular 角度2-在谷歌地图中创建多个矩形并刷新数据位置

在Angular 2中，我有一个借助的谷歌地图。该贴图必须具有创建一些矩形的选项。代码是

mapReady(map: any) {
    this.draw = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.RECTANGLE
        ]
      },
      rectangleOptions: {
        editable: true,
        draggable: true
      }
    }),
      this.map = map;
    this.draw.setMap(map);
  }

我可以创建矩形。我想得到这个矩形的位置数据。我试着做这样的事情

 google.maps.event.addListener(this.draw, 'overlaycomplete', function (polygon) {
      console.log(polygon.overlay.getBounds()
 });

但仅返回第一个位置数据，当我拖动到地图中的新位置时忽略。同样，当我创建一个新的矩形时，我想删除以前的矩形

因此，问题是：

创建新矩形时，如何删除上一个矩形

创建新矩形/移动现有矩形时，如何更新（获取新位置坐标）矩形数据位置

根据，有一种创建矩形和指定事件的正确方法。由于您使用的是第三方库/软件包，因此功能或其自己的文档可能非常有限。因为您使用的是Angular，所以实际上有一种方法可以使用官方文档

您可以参考我在这里制作的示例代码：

注意：如果出现

谷歌未定义

错误，这只是由于stackblitz造成的，如果您修改（即添加空格）任何地方（即.ts文件），该错误将消失。还可以在

index.html

文件中使用自己的占位符替换API键占位符，以使其正常运行

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<my-app>loading</my-app>

mapcomponent.html

<div #map class="map"></div> 

mapcomponent.ts

import { Component, OnInit, ViewChild } from '@angular/core';
declare const google: any;
// This example adds a user-editable rectangle to the map.
// When the user changes the bounds of the rectangle,
// an info window pops up displaying the new bounds.
var rectangle;
var infoWindow;
@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; 
  
  constructor() { }

  ngOnInit() {
    const mapProperties = { 
        center: new google.maps.LatLng(44.5452,-78.5389), 
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   this.map = new google.maps.Map(this.mapElement.nativeElement, mapProperties);

   const bounds = {
    north: 44.599,
    south: 44.49,
    east: -78.443,
    west: -78.649
  }; // Define the rectangle and set its editable property to true.

  rectangle = new google.maps.Rectangle({
    bounds: bounds,
    editable: true,
    draggable: true
  }); 
  rectangle.setMap(this.map); // Add an event listener on the rectangle.

  rectangle.addListener("bounds_changed", this.showNewRect); // Define an info window on the map.

  infoWindow = new google.maps.InfoWindow();
  }
  /** Show the new coordinates for the rectangle in an info window. */

  showNewRect() {
  const ne = rectangle.getBounds().getNorthEast();
  const sw = rectangle.getBounds().getSouthWest();
  const contentString =
    "<b>Rectangle moved.</b><br>" +
    "New north-east corner: " +
    ne.lat() +
    ", " +
    ne.lng() +
    "<br>" +
    "New south-west corner: " +
    sw.lat() +
    ", " +
    sw.lng(); // Set the info window's content and position.

  infoWindow.setContent(contentString);
  infoWindow.setPosition(ne);
  infoWindow.open(this.map);
}
  
} 

从'@angular/core'导入{Component，OnInit，ViewChild}；
声明const google:any；
//此示例将用户可编辑的矩形添加到地图中。
//当用户更改矩形的边界时，
//弹出一个信息窗口，显示新边界。
var矩形；
var信息窗口；
@组成部分({
选择器：“我的地图”，
templateUrl:'./simple map.component.html'，
样式URL:['./simple map.component.css']
})
导出类MapComponent实现OnInit{
@ViewChild（'map'，{static:true}）mapElement:any；
地图：任何；
构造函数（）{}
恩戈尼尼特（）{
常量mapProperties={
中心：新google.maps.LatLng（44.5452，-78.5389），
缩放：11，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
this.map=new google.maps.map（this.mapeElement.nativeElement，mapProperties）；
常数界限={
北：44.599，
南部：44.49，
东：-78.443，
西区：-78.649
}；//定义矩形并将其“可编辑”属性设置为true。
矩形=新的google.maps.rectangle({
界限:界限,，
是的，
德拉格布尔：是的
}); 
rectangle.setMap（this.map）；//在矩形上添加事件侦听器。
rectangle.addListener（“bounds_changed”，this.showNewRect）；//在地图上定义一个信息窗口。
infoWindow=new google.maps.infoWindow（）；
}
/**在信息窗口中显示矩形的新坐标*/
showNewRect（）{
const ne=rectangle.getBounds（）.getNorthEast（）；
const sw=rectangle.getBounds（）.getSouthWest（）；
常量内容字符串=
“矩形已移动。
”+
“新东北角：”+
ne.lat（）+
", " +
东北液化天然气+
“
”+
“新西南角：”+
西南纬度（）+
", " +
sw.lng（）；//设置信息窗口的内容和位置。
setContent（contentString）；
设置位置（ne）；
infoWindow.open（this.map）；
}
} 

import { Component, OnInit, ViewChild } from '@angular/core';
declare const google: any;
// This example adds a user-editable rectangle to the map.
// When the user changes the bounds of the rectangle,
// an info window pops up displaying the new bounds.
var rectangle;
var infoWindow;
@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; 
  
  constructor() { }

  ngOnInit() {
    const mapProperties = { 
        center: new google.maps.LatLng(44.5452,-78.5389), 
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   this.map = new google.maps.Map(this.mapElement.nativeElement, mapProperties);

   const bounds = {
    north: 44.599,
    south: 44.49,
    east: -78.443,
    west: -78.649
  }; // Define the rectangle and set its editable property to true.

  rectangle = new google.maps.Rectangle({
    bounds: bounds,
    editable: true,
    draggable: true
  }); 
  rectangle.setMap(this.map); // Add an event listener on the rectangle.

  rectangle.addListener("bounds_changed", this.showNewRect); // Define an info window on the map.

  infoWindow = new google.maps.InfoWindow();
  }
  /** Show the new coordinates for the rectangle in an info window. */

  showNewRect() {
  const ne = rectangle.getBounds().getNorthEast();
  const sw = rectangle.getBounds().getSouthWest();
  const contentString =
    "<b>Rectangle moved.</b><br>" +
    "New north-east corner: " +
    ne.lat() +
    ", " +
    ne.lng() +
    "<br>" +
    "New south-west corner: " +
    sw.lat() +
    ", " +
    sw.lng(); // Set the info window's content and position.

  infoWindow.setContent(contentString);
  infoWindow.setPosition(ne);
  infoWindow.open(this.map);
}
  
}