OverlappingMarkerSpiderfier - Google Maps - получить специальный значок для маркеров пауков - PullRequest
Новая
       9

OverlappingMarkerSpiderfier - Google Maps - получить специальный значок для маркеров пауков

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

Я пытаюсь реализовать OverlappingMarkerSpiderfier , чтобы просмотреть несколько маркеров пользователя, когда они находятся в одном и том же месте. С помощью следующего кода все работает нормально: 

function initMap() {

var osterreich = {lat: 47.7059673, lng: 13.2364467};
var map = new google.maps.Map(document.getElementById('countrymap'), {
    zoom: 7,
    center: osterreich,
    streetViewControl: false,
    mapTypeControl: false,
    scaleControl: false,
    fullscreenControl: false,   
    draggableCursor: 'pointer',
    gestureHandling: 'greedy'
});

var oms = new OverlappingMarkerSpiderfier(map, {
    markersWontMove: true,
    markersWontHide: true,
    basicFormatEvents: true,
    keepSpiderfied: true,
    legWeight: 0,
    nearbyDistance: 0.001
}); 


if(markerpositions !== null){   

for(var i=0;i<markerpositions.length;i++){

    var position = markerpositions[i];
    var positiondata = position.split(","); 
    var lat = parseFloat(positiondata[0]);
    var lng = parseFloat(positiondata[1]);
    var markerposition = {lat: lat, lng: lng};

    var marker = new google.maps.Marker({

        position: markerposition,
        map: map,
        icon: jobpinlink[i],
        draggable: false 
    }); 

    oms.addMarker(marker);

    }
}

Теперь я хочу другую иконку для маркеров, которые являются «паутинными». Таким образом, пользователь может визуально распознать, что существует более одного маркера. Я попытался понять это с помощью многих вариаций кода из документации.

Моя проблема в том, что "сборка" google-maps из документации отличается от моей, и мои навыки работы с javascript слишком слабые. Я не знаю, что адаптировать. 

oms.addListener('format', function(marker, status) {
    var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED ? 'pin_spiderable.png' :
      status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE ? 'pin_spiderable.png' :
      status == OverlappingMarkerSpiderfier.markerStatus.UNSPIDERFIABLE ? 'pin_spiderable.png' : 
      null;
    var iconSize = new google.maps.Size(23, 32);
    marker.setIcon({
      url: iconURL,
      size: iconSize,
      scaledSize: iconSize  // makes SVG icons work in IE
    });
  });

Когда я копирую Код сверху после var oms, это делает странные вещи :). Значки загружаются, но только после одного нажатия на маркер, а не при первом посещении, хотя marker.setIcon выдает ошибку Uncaught InvalidValueError: setIcon: not a string; and no url property; and no path property.

И я хочу изменить только значок spiderable-marker . Когда я оставляю только status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE ? 'pin_spiderable.png' : null; в var iconURL , смена значка не происходит, даже при втором щелчке.

С уважением, Стефан

1 Ответ

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

Я использую следующий код, и он работает для меня. 

let oms = new OverlappingMarkerSpiderfier(map, {markersWontMove: true, markersWontHide: true});

oms.addListener('format', function (marker, status) {
    let iconURL = (status === OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED) ? 'pin_spiderable.png' :
        (status === OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE) ? 'pin_spiderable.png' :
        (status === OverlappingMarkerSpiderfier.markerStatus.UNSPIDERFIABLE) ? 'pin_spiderable.png' :
                null;
    marker.setIcon({
        url: iconURL,
        scaledSize: new google.maps.Size(32, 32)  // makes SVG icons work in IE
    });
});
oms.addMarker(marker);
...