Question

我试图创建一个包含不同颜色标记的地图;

红色：http://maps.google.com/mapfiles/ms/icons/red-dot.png 黄色：http://maps.google.com/mapfiles/ms/icons/yellow-dot.png

如下所示，我使用了Google Maps API和OverlappingMarkerSpiderfier（因为我在同一点设置了一些标记），但所有标记都是红色的（带有标准图标标记，不是我的习惯）

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset="UTF-8" /> 
  <title>My test</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script> <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
</head>  <style type="text/css">
html, body { height:100%; width:100%;}
</style><body>
<div id="map" style="width:100%; height:100%;"></div>
</body> 
  <script type="text/javascript"> 

     var locations = [
        ['test', -27.23, -52.02,1,"http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
        ['test', -15.79, -47.88,10,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"],
        ['test', -3.73, -38.52,11,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      panControl:false,
      zoomControl:true,
      mapTypeControl:false,
      scaleControl:false,
      streetViewControl:false,
      overviewMapControl:false,
      rotateControl:false,
      center: new google.maps.LatLng(20.5, 15.6),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var oms = new OverlappingMarkerSpiderfier(map,
        {markersWontMove: true, markersWontHide: true,keepSpiderfied : true});
  var iw = new google.maps.InfoWindow();                                                                                                          
  oms.addListener('click', function(marker, event) {
  iw.setContent(marker.desc);
  iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
  iw.close();
});                                                                                                                                                             
oms.addListener('unspiderfy', function(markers) {       });                 

   var marker, i;
  for (var i = 0; i < locations.length; i ++) {
  var datum = locations[i][0];
  var loc = new  google.maps.LatLng(locations[i][1], locations[i][2]);
  var marker = new  google.maps.Marker({
    position: loc,
    title: datum,
    map: map,
    icon: locations[i][3]
  });
  marker.desc = datum;
  oms.addMarker(marker);
}   
</script>
</body>
</html>

有谁知道为什么这不起作用或我哪里出错了？

提前致谢！

Answer 1

对不起那些人，问题是图标中的数字。它是4而不是3。

var marker = new  google.maps.Marker({
    position: loc,
    title: datum,
    map: map,
    icon: locations[i][4]
  });

Google Maps + OverlappingMarkerSpiderfier自定义标记不起作用

1 个答案: