Question

当他们位于完全相同的位置时，我尝试实现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);

    }
}

现在，我要为“可蜘蛛”的标记使用其他图标。因此，用户可以在视觉上识别出一个以上的标记。我试图通过文档中代码的许多变体来实现这一点。

我的问题是，来自documentation的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 中时，即使第二次单击也没有图标更改。

关于斯蒂芬

Answer 1

我正在使用以下代码，它对我有用。

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

Answer 2

对此的解决方案是将 basicFormatEvents:true 更改为 basicFormatEvents:false 或完全删除它，默认情况下它为 false。

OverlappingMarkerSpiderfier-Google Maps-获取可蜘蛛标记的特殊图标

2 个答案: