Маркер карты setIcon, вызываемый очень быстро, создает проблему - PullRequest
Новая
       22

Маркер карты setIcon, вызываемый очень быстро, создает проблему

0 голосов
/ 03 апреля 2019

Если маркер установлен с помощью icon1, а затем я дважды вызываю setIcon с иконками icon2 и icon1, маркер в итоге отображается с иконкой 2. 

marker.setIcon(icon1);

// Then later on:

marker.setIcon(icon2);
marker.setIcon(icon1);

// marker is displayed with icon2

Мое объяснение состоит в том, что icon2 еще не был загружен с сервера, и маркер обновляется вместе с ним асинхронно, когда изображение завершает загрузку.

Помимо предварительной загрузки всех моих значков в первую очередь (что было бы утомительно в моем проекте, поскольку многие значки имеют динамические имена, которые зависят от содержимого данных на карте), есть способ справиться с этим на стороне js api google maps

Обновление : вот код для его воспроизведения .

Спасибо

Ответы [ 2 ]

2 голосов
/ 17 апреля 2019

Ваша реализация, похоже, создает состояние гонки с изменением маркеров, поскольку это асинхронный процесс, я бы рекомендовал вместо этого использовать слой данных и использовать динамический стиль для установки маркера на основе атрибута данных. 

function initMap() {
  const myLatLng = new google.maps.LatLng(45.4375, 12.3358);
  const myOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  let map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
  const point = {
    geometry: myLatLng,
    id: 1,
    properties: {
      warn: false
    }
  };
  dl = new google.maps.Data({map: map});
  console.log("Adding feature:");
 	console.log(point);
  dl.setStyle(setStyle);
  dl.add(point);
  dl.addListener('mouseover', e => {
  	e.feature.setProperty("warn", true);
  });
	 dl.addListener('mouseout', e => {
  	e.feature.setProperty("warn", false);
  });
}

function setStyle(feature) {
	console.log('setting style for feature');
	const warn = feature.getProperty('warn');
  let icon = 'https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png';
	if (warn) {
  	icon = 'https://maps.google.com/mapfiles/kml/shapes/caution.png';
  }
  const style = {
  	title: feature.getId(),
  	icon: icon
  };
  console.log("style = " + style);
  return style;
}
#map-canvas {
    height: 600px;
    width: 600px;
    background-color: #CCC;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAj0aaMu_aY6xiDSWH0ac_4pqN_l-opwmI&callback=initMap"
    async defer></script>
0 голосов
/ 03 апреля 2019

Вы можете попробовать переключить его с помощью marker.setVisible(). Некоторую странность с gmaps я решил, вызвав функции с setTimeout, но это просто еще один обходной путь.

...