我在这个问题上找到了很多答案,但是在使用.gif图像而不是标记时却没有。要使用.gif图像(以及GIF动画)我使用代码(有效)
var image = {
url: 'img/RedFlashYacht.gif',
size: new google.maps.Size(75, 75),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32),
scaledSize: new google.maps.Size(50, 50)
};
marker = new google.maps.Marker({
position: pos ,
map: map,
icon: image,
store_id: mkrID,
optimized: false
});
//对于没有使用过.gif文件的人来说,'optimized:false'这一行很关键
我现在要做的是旋转gif图像(到指定的角度,而不是一个恒定的旋转[我可以做GIF动画])。暂时使用'store_id:mkrID'设置图像的ID,之前创建了var mkrID,我可以使用代码marker.get('store_id')将其读回来,所以我知道它已被设置。我无法使用document.getElementById访问该图像。我也无法获得任何谷歌地图API旋转示例代码。我发现的示例似乎是针对v2或与谷歌地图自己的标记相关,而不是使用gif的自定义图像。
有没有人能够在谷歌地图中旋转gif图像?
标记的“store_id”属性不允许您访问包含图像的DOM元素。如果每个标记都有一个唯一的图标,您可以使用其带有JQuery的URL获取它,然后对其应用CSS转换:
$('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
'transform': 'rotate(45deg)'
});
注意:这仅适用于带optimized: false
的标记
代码段:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.47949, -122.083168),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = {
url: 'http://www.geocodezip.com/mapIcons/boat-10-64.gif',
size: new google.maps.Size(75, 75),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32),
scaledSize: new google.maps.Size(50, 50)
};
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: image,
store_id: "mkrID",
optimized: false
});
var rotationAngle = 10;
google.maps.event.addListenerOnce(map, 'idle', function() {
setInterval(function() {
$('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
'transform': 'rotate(' + rotationAngle + 'deg)'
});
rotationAngle += 10;
}, 1000);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
另一种方法是使用Custom Overlay。
.
.
var overlay = new google.maps.OverlayView();
overlay.draw = function() {
this.getPanes().markerLayer.id = 'markerLayer';
}
overlay.setMap(map);
.
.
var deg = 270;
document.querySelector("#markerLayer img").style.transform = 'rotate(' + deg + 'deg)';
.
有关更清晰,请参阅此demo pen。