Javascript google maps api, маркер не вращая значок [дубликат]

Если у вас нет контроля над фрейм-сайтом, вы не можете обойти междоменную политику.

Если у вас есть контроль над обоими сайтами, вы можете использовать postMessage для передачи данных в разных доменах. Очень простой пример:

// framed.htm:
window.onmessage = function(event) {
    event.source.postMessage(document.body.innerHTML, event.origin);
};

// Main page:
window.onmessage = function(event) {
    alert(event.data);
};

// Trigger:
// 
document.getElementById('myframe').contentWindow.postMessage('','*');

3
задан Mike Scott 2 August 2016 в 14:42
поделиться

1 ответ

Свойство «store_id» маркера не дает вам доступ к элементу DOM, который содержит изображение. Если у вас есть уникальный значок для каждого маркера, вы можете его захватить, используя свой URL с JQuery, а затем применить к нему 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>

7
ответ дан geocodezip 17 August 2018 в 10:42
поделиться
  • 1
    Спасибо за ответ. Интересно. На данный момент все изображения будут одинаковыми (но на разных градусах поворота), поэтому для этого я мог бы создавать копии одного и того же gif с разными именами. Немного неуклюжий, но выполнимый, если на карте не так много изображений – Mike Scott 2 August 2016 в 20:54
  • 2
    добавив переменную GET (которая ничего не делает), например nonclumsy.gif?1 / nonclumsy.gif?2 / nonclumsy.gif?3, поможет вам дублировать gif. все еще не очень приятно, поскольку браузеры будут загружать все отдельно, но если это не тысячи из них ... – benzkji 9 February 2018 в 11:10
Другие вопросы по тегам:

Похожие вопросы: