Как контролировать прозрачность маркеров карты Google - PullRequest
Новая
       1

Как контролировать прозрачность маркеров карты Google

8 голосов
/ 10 января 2012

Мне нужно сделать некоторые маркеры полупрозрачными в зависимости от времени. Есть ли способ контролировать непрозрачность CSS маркера? Или можно надежно определить элемент DOM маркера?

Я использую Google Maps API v3.

Ответы [ 3 ]

32 голосов
/ 20 августа 2015

Непрозрачность маркеров можно установить с помощью marker.setOptions({'opacity': 0.5})

15 голосов
/ 30 января 2016

Вы можете использовать marker.setOpacity(0.5); https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker

фрагмент кода: 

var marker;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      zoom: 10,
      center: {
        lat: -33.9,
        lng: 151.2
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  marker = new google.maps.Marker({
    position: {
      lat: -33.890542,
      lng: 151.274856
    },
    map: map,
    title: "Bondi Beach"
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="inc" type="text" value="0.5" />
<input type="button" id="set" value="set opacity" onclick="marker.setOpacity(parseFloat(document.getElementById('inc').value))" />
<input type="button" id="full" value="full opacity" onclick="marker.setOpacity(1.0);" />
<div id="map_canvas"></div>
5 голосов
/ 10 января 2012

Нет пути через CSS. Вы можете ссылаться на маркеры в массиве, а затем циклически проходить по массиву, используя метод setIcon() для каждого объекта маркера, чтобы ссылаться на значки с разной прозрачностью (предполагая, что вы используете PNG с альфа-прозрачностью). Вам нужно будет вызвать функцию, чтобы изменить значки в зависимости от ввода пользователя или какого-либо другого события.

...