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

问题描述

我正在制作地图项目，例如在地图上添加形状和位置并将其保存.

I'm making map project for use like adding shapes and location on map and save it.

但是我在地面覆盖方面遇到了问题.

but i'm getting problem with groundoverlay.

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

i know there is no property exist for rotation in google map document.but i need a way/trick to rotate groundoverlay image, by any other way.

此处代码

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

我正在使用滑块旋转叠加.

i am using slider for rotate overlay.

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

我尝试了投影，但是没有成功.

I have tried with projection but no success.

任何可能的方式都会受到赞赏.

Any posible way will be appreciate.

任何帮助都会有用，谢谢.

Any help will be useful, thank you.

推荐答案

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

You can achieve this by using a custom overlay: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple.

将事件侦听器添加到USGSOverlay.prototype.onAdd中的叠加层滑块，然后在输入上设置div的旋转.

Add an event listener to the overlay slider in USGSOverlay.prototype.onAdd and then set the rotation of the div on input.

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

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

And here is the modified custom overlay example: https://jsfiddle.net/b0tLd46u/4/. You can set the rotation of the overlay by the range slider above the map.

这篇关于谷歌地图:如何旋转`groundoverlay`需要技巧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！