Javascript 重叠标记谷歌地图_Javascript_Google Maps_Google Maps Api 3_Overlapping

Javascript 重叠标记谷歌地图

javascript google-maps google-maps-api-3

Javascript 重叠标记谷歌地图,javascript,google-maps,google-maps-api-3,overlapping,Javascript,Google Maps,Google Maps Api 3,Overlapping,我需要建立我的地图数据库。我设置了表格和页面，以便正确获取坐标和功能，以及地图的视觉效果。现在8000条记录都在同一个坐标上。如何创建重叠 <html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/&

我需要建立我的地图数据库。我设置了表格和页面，以便正确获取坐标和功能，以及地图的视觉效果。现在8000条记录都在同一个坐标上。如何创建重叠

<html > 
 <head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Mappa Veicoli</title> 
<script src="https://maps.googleapis.com/maps/api/js?                   
       key=xxxxxxxxxxxxxxx" 
        type="text/javascript"></script> 

<script type="text/javascript"> 
//<![CDATA[ 

var customIcons = { 
  FRANCIA: { 
    icon: '../immig/bandiere/blue_MarkerA.png' 
  }, 
  GERMANIA: { 
    icon: './immig/bandiere/pink_MarkerA.png' 
  }, 
  USA: { 
    icon: '../immig/bandiere/darkgreen_MarkerA.png' 
  } 
  , 
  SPAGNA: { 
    icon: '../immig/bandiere/green_MarkerA.png' 
  } 
}; 

function load() { 
  var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(12.444, 14.2 ), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
  }); 
  var infoWindow = new google.maps.InfoWindow; 

  // Change this depending on the name of your PHP file 
  downloadUrl("xmleicoli.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
      var cognome = markers[i].getAttribute("Cognome"); 
      var nome = markers[i].getAttribute("Nome"); 
      var type = markers[i].getAttribute("Nazione"); 
      var address = markers[i].getAttribute("Residenza"); 

      var point = new google.maps.LatLng( 
          parseFloat(markers[i].getAttribute("lat")), 
          parseFloat(markers[i].getAttribute("lng"))); 
      var html = "<b>" + cognome + "," + nome + "</b> <br/>" +       
           address; 
      var icon = customIcons[type] || {}; 
      var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        icon: icon.icon 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
    } 
  }); 
          } 

  function bindInfoWindow(marker, map, infoWindow, html) { 
  google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
  }); 
    } 

    function downloadUrl(url, callback) { 
   var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

  request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
    } 
  }; 

  request.open('GET', url, true); 
  request.send(null); 
} 

    function doNothing() {} 

//]]> 

 </script> 

 </head> 

 <body onload="load()"> 
<div id="map" style="width: 1200px; height:800px"></div> 
 </body> 

     </html>


马帕维科利
//

在这种情况下，您需要稍微移动每个标记，以便它们不会相互重叠，并且for表示有更多标记分组。您可以使用标记群集。您可以在StackOverflow中看到许多示例

对于标记，YOU可以设置lat、lng和eg之间存在微小差异的位置，为相同原始位置的每个标记添加+0.00001

函数doNothing（）{}

-为什么？请求完成后，

下载URL

函数将使用它。感谢您的回答，我尝试添加0.000001，但标记太近，不容易区分。我发现了OverlappingMarkersPiderFire，但不了解如何实现代码0.0.00001而不是0.000001一个零。否则，标记太近，如果结果更好，则为0.00005。我也尝试添加0.00010，但差异太小，您无法看到，因为它们大约有8000条记录，为什么我在使用0.000001（或其他一些大于或小于0.00001的偏移量）将偏移量添加到lat/long时会想到重叠标记spiderfier你也需要考虑地图缩放级别。在缩放级别15时，偏移量0.000001看起来很好，可以解决您的问题，但在缩放级别10时可能不太好。只是考虑一下。