jquery - 谷歌地图 : How to rotate `groundoverlay` need trick

Question

我正在制作 map 元素，用于在 map 上添加形状和位置并保存它。

但是我遇到了 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);

我正在使用 slider 旋转叠加层。

$("#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 中为覆盖 slider 添加一个事件监听器，然后在输入时设置 div 的旋转。

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

这里是修改后的自定义覆盖示例:https://jsfiddle.net/b0tLd46u/4/ .您可以通过 map 上方的范围 slider 设置叠加层的旋转。