Pytanie Google Maps V3 nakładające się znaczniki na dokładną lokalizację


Mam problemy z nakładaniem się znaczników, proszę nie głosujcie, ponieważ nie jestem uczony w javascript, ja również patrzę na różne odpowiedzi oferowane na stackoverflow, ale nie byłem w stanie ich użyć, aby znaleźć rozwiązanie, więc proszę o pomoc! Kod przechwytuje php za długi i długi w oparciu o punkty statyczne, które podałem. Chciałbym po prostu zamieścić wszystkie informacje w tym samym znaczniku, a nie na to, aby nakładały się na znaczniki. Pomoc byłaby bardzo doceniana. Oto kod:

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

11
2017-11-06 19:37


pochodzenie


Proponuję utworzyć tablicę nienakładających się znaczników. Dla każdego punktu lat / lng sprawdź znaczniki, które utworzyłeś do tej pory. Jeśli współrzędna X / Y znajduje się w pewnym promieniu punktu, należy założyć, że pokrywa się. Zaktualizuj znacznik, aby zawierał dodatkowe informacje. Jeśli punkt znajduje się poza bieżącą listą znaczników, utwórz nowy znacznik i dodaj go do listy. - OpenGeoCode.Org - Andrew - OpenGeoCode
możliwy duplikat Google Maps Wielokrotne markery z tą samą lokalizacją Nie działa - geocodezip
Markery, które się nakładają mają dokładnie ten sam punkt długości i długości, po prostu chciałbym, aby był jeden znacznik z całą zawartością dla różnych znaczników, które byłyby w tym punkcie, niestety nie jestem obeznany z javascript na tyle, aby to osiągnąć. @Andrzej - Learning
Przyjrzałem się temu pytaniu, jednak nie pobiera ono dynamicznie danych z PHP MYSQL DB, i nie mogę zrozumieć, w jaki sposób automatycznie pobierze znacznik w pobliżu i umieści w nim zawartość, jednak końcowy wynik jest dokładnie tym, co chciałbym osiągnąć, nie jestem pewien, jak go wdrożyć w tej sytuacji. @geocodezip - Learning
Każdy pomysł, w jaki sposób mogę osiągnąć to rozwiązanie za pomocą tego kodu, ponieważ potrzebuję pobrać informacje o znacznikach za pomocą php. Mam dużo problemów, aby zrozumieć, jak zrobiłeś to, co zrobiłeś, ponieważ jest dokładnie to, czego chcę. @geocodezip - Learning


Odpowiedzi:


Jeśli nie chcesz, aby nakładały się znaczniki, prawdopodobnie będziesz musiał użyć google-maps-utility-library-v3. Posiada funkcję o nazwie Marker Clusterer, która w zasadzie pozwala umieścić w pobliżu znaczniki w jeden pojedynczy znacznik. Można go skonfigurować tak, aby te znaczniki pojawiały się ponownie jako oddzielne jednostki po wystarczająco dużym powiększeniu użytkownika. Oto zaawansowane demo.


5
2017-11-06 19:51



Polubiłem wersję demo. Nie korzystałem z tej funkcji Google. Czy na razie! - Andrew - OpenGeoCode
@Andrew Jest bardzo przydatny, szczególnie w aplikacjach, w których ważne jest, aby móc widzieć wszystkie znaczniki (lub przynajmniej wiedzieć, ile z nich istnieje w określonym obszarze)! - Wayne Whitty
Dziękuję bardzo za twoją odpowiedź, widziałem to na innych forach niestety na szczęście nie jestem pewien, czy to zadziała, bo mam markery z dokładnie tymi samymi latami i długimi punktami, bo są one dla różnych osób pracujących w tym samym budynku, idealne rozwiązanie byłoby być sposobem na umieszczenie zawartości znacznika, który nakłada się na tym samym znaczniku, tak aby wszystkie informacje dotyczące tej lokalizacji były w jednym infobox znacznika, jeszcze raz dziękuję za pomoc! :) @WayneWhitty - Learning
Chciałbym osiągnąć ten sam efekt końcowy, jaki dostarczył geocodezip @WayneWhitty - Learning
Link demo przechodzi na 404 - Biblioteka Narzędzi Google Maps została przeniesiona do github - user1380540


Używam tego - https://github.com/jawj/OverlappingMarkerSpiderfier

Zobacz wersję demonstracyjną tutaj - http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html


3
2017-11-08 20:29



Ta wtyczka ma jedną słabość, ponieważ nie można stwierdzić, czy znacznik jest idealnie ukryty za innym znacznikiem. Ponieważ pierwotne repozytorium wydaje się być porzucone, rozwinąłem repozytorium i utworzyłem opcję z opcją szturchnij idealnie nachodzące na siebie znaczniki od siebie nawzajem: github.com/fritz-c/OverlappingMarkerSpiderfier - Chris
Demo już nie istnieje ... 404. - Shanimal
Demo tutaj: jawj.github.io/OverlappingMarkerSpiderfier/demo-3.html - candlejack


Znalazłem rozwiązanie dzięki licznym poszukiwaniom i dzięki postom @geocodezip, nadal mam mały problem przy powiększaniu do znaczników, każdy znacznik który bezpośrednio na innym pozostanie w trybie klastrowym, chciałbym uzyskać infoWindow dzielący oba znaczniki treść jakiejkolwiek pomocy byłaby niesamowita, dzięki ponownie geocodezip dla twoich postów!

<!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
2017-11-08 20:25



ustawiłeś wartość mcOptions, ale nigdzie jej nie używałeś ... a konkretnie maxZoom - Shanimal


Możesz użyć MarkerClusterer z biblioteki narzędziowej Google Maps.

Oto przykład "krok po kroku": https://developers.google.com/maps/documentation/javascript/marker-clustering

I możesz pobrać bibliotekę z google maps github repo: https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer


0
2018-02-21 08:44





Dodaj małe liczby losowe do szerokości i długości geograficznej znacznika.

Spowoduje to przesunięcie zachodzących na siebie znaczników wokół ich prawidłowej pozycji. Po powiększeniu znaczniki zostaną rozdzielone. Mniejsze liczby losowe zwiększają dokładność, ale potrzebne jest większe powiększanie. Zmieniaj także ikonę znacznika lub etykietę, aby wskazać, że się nakłada.

W tym przykładzie używane są cztery różne znaczniki. Jeśli występuje więcej niż 4 nachodzące na siebie punkty, dodaje się niewielką randomizację.

Przykład: http://waveneyramblers.org.uk/walks/next_eight_days

Wyświetl źródło, aby zobaczyć JavaScript.


0
2018-05-08 12:53