时间戳

首页 > 解决方案 > Angular 2 - 在 Google 地图中创建多个矩形并刷新数据位置

angular - Angular 2 - 在 Google 地图中创建多个矩形并刷新数据位置

问题描述

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

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()
 });

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

所以问题：

  1. 创建新矩形时如何删除以前的矩形？
  2. 当我创建新/移动现有矩形时，如何更新（获取新位置坐标）矩形数据位置？

标签： angulargoogle-maps

解决方案

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

您可以参考我在这里制作的示例代码：https ://stackblitz.com/edit/angular-rectangle-position-63886966

注意：如果你得到一个google is not defined错误，那只是由于 stackblitz，如果你在任何地方（即 .ts 文件）修改（即添加空格）就会消失。还要在文件中将 API 密钥占位符替换为您自己的，index.html以使其正常运行。

索引.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>

样式.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height:100%;
}

地图组件.html

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

地图组件.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);
}
  
}

推荐阅读