谷歌地图：如何旋转`groundoverlay`需要技巧

Question

我正在制作地图项目，用于在地图上添加形状和位置并保存。

但我遇到了groundoverlay 的问题。

我知道谷歌地图文档中不存在可旋转的属性。 但我需要一种方法/技巧来通过任何其他方式旋转groundoverlay 图像。

这里是代码

var srcImage = "http://demo/image/uploads/demo.jpg";
var bounds = {
    north: 44.599,
    south: 44.490,
    east: -78.443,
    west: -78.649
}
var overlay = new google.maps.GroundOverlay(srcImage ,bounds);
overlay.setMap(map);

我正在使用滑块进行旋转叠加。

$("#overlayslider").slider().on('slide',function(e){
     var angle = e.newVal;
     // i want rotate overlay by angle/degree as per slider
})

我尝试过投影但没有成功。

任何可能的方式将不胜感激。

任何帮助都会很有用，谢谢。

Answer 1

您可以通过使用自定义叠加层来实现此目的：https://developers.google.com/maps/documentation/javascript/examples/overlay-simple。

在USGSOverlay.prototype.onAdd 的覆盖滑块上添加一个事件监听器，然后在输入时设置 div 的旋转。

document.getElementById('overlayslider').addEventListener('input', function() {
    div.style.transform = 'rotate(' + this.value + 'deg)';
});

这是修改后的自定义叠加示例：https://jsfiddle.net/b0tLd46u/4/。您可以通过地图上方的范围滑块设置叠加层的旋转。

Answer 2

这是我的解决方案，主要灵感来自This Answer

rotated-overlay.ts

export class CustomOverlay extends google.maps.OverlayView {
  private div;

  constructor(
    private bounds: google.maps.LatLngBounds,
    private image: string,
    private rotation: number
  ) {
    super();

    // Define a property to hold the image's div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div = null;
  }

  /**
   * onAdd is called when the map's panes are ready and the overlay has been
   * added to the map.
   */
  onAdd() {
    const div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';

    // Create the img element and attach it to the div.
    const img = document.createElement('img');
    img.src = this.image;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';
    div.appendChild(img);

    this.div = div;

    // Add the element to the "overlayLayer" pane.
    const panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
  };

  draw() {

    // We use the south-west and north-east
    // coordinates of the overlay to peg it to the correct position and size.
    // To do this, we need to retrieve the projection from the overlay.
    const overlayProjection = this.getProjection();

    // Retrieve the south-west and north-east coordinates of this overlay
    // in LatLngs and convert them to pixel coordinates.
    // We'll use these coordinates to resize the div.
    const sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
    const ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());

    // Resize the image's div to fit the indicated dimensions.
    const div = this.div;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
    div.style.transform = 'rotate(' + this.rotation + 'deg)';
  };

  // The onRemove() method will be called automatically from the API if
  // we ever set the overlay's map property to 'null'.
  onRemove() {
    this.div.parentNode.removeChild(this.div);
    this.div = null;
  };
};

地图组件.ts

public addOverlay(imageUrl: string, rotation: number, bounds: google.maps.LatLngBounds, map: google.maps.Map){
  let overlay = new CustomOverlay(
    bounds,
    imageUrl,
    rotation,
    
  );
  overlay.setMap(map);
}