web-dev-qa-db-fra.com

Marqueurs superposés Google Maps V3 sur l'emplacement exact

J'ai des problèmes avec les marqueurs qui se chevauchent, veuillez ne pas voter, car je ne suis pas très instruit en javascript. J'ai aussi examiné les différentes réponses proposées sur stackoverflow, mais je n'ai pas pu les utiliser pour trouver une solution. Aidez-moi! Le code saisit php pour les lat et long sur la base des points statiques que j'ai donnés je voudrais simplement énumérer toutes les informations dans le même marqueur plutôt que de le faire chevaucher des marqueurs toute aide serait très appréciée voici le code:

  <head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<META HTTP-EQUIV="refresh" >
<title>Operations</title>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"></script>
<script src="oms.min.js"></script>
<script type="text/javascript">
//<![CDATA[

var customIcons = {      

restaurant: {        icon: 'mm_20_blue.png'      },      

bar: {        icon: 'mm_20_blue.png'      }    

};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(32.298342, -64.791098),
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
       var id = markers[i].getAttribute("permitnumber");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + '<a href="http://server/editform.php?find=' + id + '" >More Info</a> <br/> <form action="del.php" method="post" enctype="multipart/form-data"> <input type="checkbox" name="checkbox" id="checkbox" value="' + id +'"> <input name="delete" type="submit" id="delete" value="Delete">  ' ;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow,
        animation: google.maps.Animation.BOUNCE

      });

      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>


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.Push(['_setAccount', 'UA-24568877-1']);
  _gaq.Push(['_trackPageview']);

   (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-         analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();

    </script>

   </head>

   <body onload="load()" bgcolor="#A8F748" >

  <div id="map" style="margin:auto; width: 90%; height: 470px"></div>






  </body>
javascriptphpgoogle-maps
13
Learning

J'ai trouvé une solution en cherchant beaucoup et grâce aux messages de @geocodezip, je rencontre toujours un petit problème en zoomant sur les marqueurs. Les marqueurs directement sur un autre resteront en mode clusterisé. J'aimerais réaliser infoWindow qui partage les deux content toute aide serait génial, merci encore geocodezip pour vos messages!

<!DOCTYPE html >
<head>

    <meta charset="utf-8"/>
    <title>Google Maps API V3 with Marker Manager</title>
    <meta name="description" content="Google Maps API V3 with MarkerCluster, Coincident Markers Share Infowindow" />
    <meta name="keywords" content="google maps api v3, markerclusterer, markers, infowindow" />
    <meta name="author" content="Casey P. Thomas" />
    <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript"  src="http://maps.caseypthomas.org/markerclusterer.js"></script>
<script type="text/javascript">
//<![CDATA[
        var map;

    //marker clusterer
    var mc;
    var mcOptions = {gridSize: 20, maxZoom: 17};
    var markers;        
    //global infowindow
    var infowindow = new google.maps.InfoWindow();

    //geocoder
    var geocoder = new google.maps.Geocoder(); 


  var customIcons = {
  restaurant: {
    icon: 'mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  bar: {
    icon: 'mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
 };

 function load() {
  var cluster = [];
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(32.298342, -64.791098),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
var infowindow = new google.maps.InfoWindow();

  // Change this depending on the name of your PHP file
  downloadUrl("genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
       var id = markers[i].getAttribute("permitnumber");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + '<a href="http://server/editform.php?find=' + id + '" >More Info</a> <br/> <form action="del.php" method="post" enctype="multipart/form-data"> <input type="checkbox" name="checkbox" id="checkbox" value="' + id +'"> <input name="delete" type="submit" id="delete" value="Delete">  ' ;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow,
        animation: google.maps.Animation.BOUNCE
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                         var id = markers[i].getAttribute("permitnumber");
                        var name = markers[i].getAttribute("name");
                        var address = markers[i].getAttribute("address");
                        var type = markers[i].getAttribute("type");
                        infowindow.setContent("<b>" + name + "</b> <br/>" + address + "<br/>" + '<a href="http://server/editform.php?find=' + id + '" >More Info</a> <br/> <form action="del.php" method="post" enctype="multipart/form-data"> <input type="checkbox" name="checkbox" id="checkbox" value="' + id +'"> <input name="delete" type="submit" id="delete" value="Delete">  ');
                        infowindow.open(map, marker);

                    }
                })(marker, i));
      cluster.Push(marker);
    }
    var mc = new MarkerClusterer(map,cluster);
  });
}

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> 



 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
 <script type="text/javascript">

var _gaq = _gaq || [];
_gaq.Push(['_setAccount', 'UA-24568877-1']);
_gaq.Push(['_trackPageview']);

 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-  analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

 </script>


 </head>

 <body onload="load()" bgcolor="#A8F748" >

 <div id="map" style="margin:auto; width: 90%; height: 470px"></div>






</body>

</html>
1
Learning

Si vous ne voulez pas que les marqueurs se chevauchent, vous devrez probablement utiliser google-maps-utility-library-v3 . Il comporte une fonctionnalité appelée Marker Clusterer, qui vous permet en principe de placer les marqueurs proches dans un marqueur unique. Il peut être configuré pour que ces marqueurs réapparaissent en tant qu'entités distinctes une fois que l'utilisateur a effectué un zoom suffisant. Voici une démo avancée .

5
Wayne Whitty

J'utilise ceci - https://github.com/jawj/OverlappingMarkerSpiderfier

Voir une démo ici - http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html

3
Vince Lowe

Ajoutez de petits nombres aléatoires à la latitude et à la longitude du marqueur.

Cela déplace les marqueurs qui se chevauchent autour de leur position correcte. Lorsque vous effectuez un zoom avant, les marqueurs se séparent. Des nombres aléatoires plus petits améliorent la précision, mais un zoom avant plus important est nécessaire. Modifiez également l'icône ou l'étiquette du marqueur pour indiquer son chevauchement.

Dans cet exemple, quatre marqueurs différents sont utilisés. S'il y a plus de 4 points qui se chevauchent, la légère randomisation est ajoutée.

Exemple: http://waveneyramblers.org.uk/walks/next_eight_days

Voir la source pour voir le JavaScript.

0
Neil Bauers

Vous pouvez utiliser le MarkerClusterer à partir de la bibliothèque d’utilitaires Google Maps.

Voici un exemple pas à pas: https://developers.google.com/maps/documentation/javascript/marker-clustering

Et vous pouvez télécharger la bibliothèque à partir du dépôt github de Google Maps: https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer

0
MazarD