問(wèn)題描述

我在這個(gè)問(wèn)題上找到了很多答案，但沒(méi)有一個(gè)在使用 .gif 圖像而不是標(biāo)記時(shí)有效.要使用 .gif 圖像(以及動(dòng)畫(huà) gif)，我使用代碼(有效)

I find lots of answers on this question but not one that works when using .gif images and not markers. To use .gif images (and also animated gifs) I use code (which works)

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

//對(duì)于沒(méi)有使用過(guò).gif的人來(lái)說(shuō)，'optimized: false'這一行很關(guān)鍵

//for anyone who has not used .gif, the line 'optimized: false' is critical

我現(xiàn)在要做的是旋轉(zhuǎn) gif 圖像(到指定的角度，而不是恒定的旋轉(zhuǎn) [我可以做 gif 動(dòng)畫(huà)]).盡管使用 'store_id: mkrID' 為圖像設(shè)置 ID，之前創(chuàng)建了 var mkrID，但我可以使用代碼 marker.get('store_id') 將其讀回，所以我知道它已被設(shè)置.我無(wú)法使用 document.getElementById 訪問(wèn)圖像.我也不能讓任何谷歌地圖 API 旋轉(zhuǎn)示例代碼工作.我發(fā)現(xiàn)的示例似乎適用于 v2 或與谷歌地圖自己的標(biāo)記有關(guān)，而不是使用 gif 的自定義圖像.

What I want to do now is rotate the gif image (to a specified angle, not a constant rotate [that I can do as animated gif]). Dispite setting the ID for the image with 'store_id: mkrID,' var mkrID being previously created, and I can read it back with code marker.get('store_id') so I know it's been set. I cannot access the image with document.getElementById. nor can I get any of the google maps API rotate eample code to work either. Examples I find seem to be for v2 or relate to google maps own markers, not custom images using a gif.

有人可以在谷歌地圖中旋轉(zhuǎn) gif 圖像嗎?

Has anyone been able to rotate a gif image in a google map?

推薦答案

store_id"標(biāo)記的屬性不允許您訪問(wèn)包含圖像的 DOM 元素.如果每個(gè)標(biāo)記都有一個(gè)唯一的圖標(biāo)，則可以使用 JQuery 的 URL 獲取它，然后對(duì)其應(yīng)用 CSS 轉(zhuǎn)換:

The "store_id" property of the marker doesn't give you access to the DOM element which contains the image. If you have a unique icon for each marker, you can grab it using its URL with JQuery, then apply a CSS transform to it:

$('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
  'transform': 'rotate(45deg)'
});

注意:這僅適用于帶有 optimized: false

• 概念證明小提琴
• 概念證明小提琴旋轉(zhuǎn) .png 圖像

代碼片段:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

這篇關(guān)于在谷歌地圖 api v3 上旋轉(zhuǎn) .gif 圖像?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！