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

Question

我正在制作地图项目以供使用，例如在地图上添加形状和位置并保存它。

但我遇到了地面覆盖的问题。

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

这里的代码

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/。您可以通过地图上方的范围滑块设置叠加层的旋转。