গুগল চিহ্নিতকারী একই ঠিকানায় সমস্ত মার্কার দেখাচ্ছে না

Question

আমি এই মানচিত্রটিতে কাজ করছি - http://www.mediwales.com/mapping/test/

এটি সংস্থাগুলিকে জরিমানা করার পরিকল্পনা করছে এবং তাদের ঠিকঠাক করে দিচ্ছে তবে একই ঠিকানা সহ একই বিল্ডিংয়ের সংস্থাগুলিতে একটি সমস্যা দেখা দিয়েছে। এটি সমস্তগুলির চেয়ে কেবল একটি সংস্থা দেখায়।

আমি কীভাবে এটি একই ঠিকানায় সমস্ত সংস্থাগুলি প্রদর্শন করতে পারি?

নাম / নম্বর, রাস্তা, শহর, পোস্ট কোড দ্বারা চিহ্নিতকারীরা জিওকোড হয়। আমি অনুমান করছি যে মার্কারগুলি সেখানে একটি বিল্ডিং হিসাবে রয়েছে যেখানে ক্লাস্টারে 3 টি সংস্থা রয়েছে 3 দেখায়। তবুও আপনি যখন এটিতে ক্লিক করেন, এটি কেবলমাত্র একটি সংস্থা দেখায়।

হালনাগাদ:

আমি সেগুলি অফসেটে আনতে সক্ষম হয়েছি, তবে এটি যদি কেবলমাত্র একাধিক মার্কার একই থাকে তবে আমি এটি অফসেট করতে চাইলে এটি সমস্ত মার্কারকে অফসেট করে। (কেসির উত্তরের জন্য ধন্যবাদ)

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

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.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(53.4788, -3.9551),
        zoom: 6,
        mapTypeId: 'roadmap'
      });
var infowindow = new google.maps.InfoWindow();
var min = .999999;
var max = 1.000001;

      // Change this depending on the name of your PHP file
      downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_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 offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
          var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);



          var point = new google.maps.LatLng(offsetLat, offsetLng);
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(markers[i].getAttribute("name"));
                            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>

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

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.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(53.4788, -3.9551),
        zoom: 6,
        mapTypeId: 'roadmap'
      });
var infowindow = new google.maps.InfoWindow();

      // Change this depending on the name of your PHP file
      downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_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 point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(markers[i].getAttribute("name"));
                            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>

Answer 1

ক্লাস্টার সঠিকভাবে প্রদর্শন করছে। সমস্ত চিহ্নিতকারী চক্রান্ত করা হচ্ছে। সমস্যাটি হ'ল আপনি কেবল শীর্ষ সর্বাধিক চিহ্নিতকারীকে ক্লিক করতে পারেন, এটি দেখে মনে হয় কেবল একমাত্র চিহ্নিতকারী রয়েছে।

কাকতালীয় চিহ্নিতকারীগুলির সামগ্রী দেখতে, আপনাকে অন্তর্নিহিত চিহ্নিতকারীগুলির ইনফাইন্ডো সামগ্রীগুলি শীর্ষ সর্বাধিক চিহ্নিতকারীকে দিতে হবে।

এটি করতে প্রথমে প্রতিটি চিহ্নিতকারীকে ট্র্যাক করে রাখুন। আপনি মার্কারক্লাস্টার ব্যবহার করছেন, সুতরাং মার্কারক্লাস্টার উদাহরণটি প্রতিটি চিহ্নিতকারীকে ধরে রাখবে। প্রতিটি জিওকোড ফলাফল ফিরে আসার সাথে সাথে, ইতিমধ্যে প্লট করা সমস্ত চিহ্নিতকারীদের সাথে সেই অনুরোধটির ল্যাটল্যাংকে তুলনা করুন। ল্যাটলং অবজেক্টের সমান পদ্ধতিটি ব্যবহার করে আপনি পজিশনের তুলনা করতে পারেন ।

যদি নতুন চিহ্নিতকারী কোনও বিদ্যমান চিহ্নিতকারীর অবস্থানের সাথে মেলে, তবে প্রথম চিহ্নিতকারী থেকে ইনফাইন্ডো সামগ্রীগুলি নিন এবং এটিকে নতুন চিহ্নিতকারীর ইনফাইন্ডো সামগ্রীগুলিতে যুক্ত করুন। এইভাবে, আপনি শীর্ষ সর্বাধিক চিহ্নিতকারী (দ্বিতীয় সংস্থা) এ ক্লিক করলে, এটি উভয় সংস্থার তথ্য প্রদর্শন করবে। যদি দুটিরও বেশি সংস্থাগুলি থাকে তবে আপনাকে সমস্ত মিলে যাওয়া চিহ্নিতকারীদের জন্য ইনফাইন্ডো সামগ্রীগুলি ধরতে হবে। এই পদ্ধতিটি মার্কার ক্লাস্টারটিকে এখনও চিহ্নিতকারীগুলির সঠিক সংখ্যা প্রদর্শন করার অনুমতি দেবে।

এখানে একটি কার্যকারী উদাহরণ এবং জাভাস্ক্রিপ্ট কোড। প্রথম এবং দ্বিতীয় ঠিকানাগুলি একই। আপনি যখন 2 এর জন্য চিহ্নিতকারীটি ক্লিক করেন, এটি "2 এবং 1" প্রদর্শন করবে।

<script type="text/javascript"> 
var map;

//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};

//global infowindow
var infowindow = new google.maps.InfoWindow();

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

var address = new Array("1000 Market St, Philadelphia, PA","1000 Market St, Philadelphia, PA","1002 Market St, Philadelphia, PA","1004 Market St, Philadelphia, PA");
var content = new Array("1","2","3","4");

function createMarker(latlng,text) {

    var marker = new google.maps.Marker({
        position: latlng
    });

    ///get array of markers currently in cluster
    var allMarkers = mc.getMarkers();

    //check to see if any of the existing markers match the latlng of the new marker
    if (allMarkers.length != 0) {
        for (i=0; i < allMarkers.length; i++) {
            var currentMarker = allMarkers[i];
            var pos = currentMarker.getPosition();

            if (latlng.equals(pos)) {
                text = text + " & " + content[i];
            }

        }
    }

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.close();
        infowindow.setContent(text);
        infowindow.open(map,marker);
    });

    return marker;
}

function geocodeAddress(address,i) {

    geocoder.geocode( {'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            var marker = createMarker(results[0].geometry.location,content[i]);
            mc.addMarker(marker);

        } else { 
            alert("Geocode was not successful for the following reason: " + status); 
        } 
    });
}

function initialize(){

    var options = { 
        zoom: 13, 
        center: new google.maps.LatLng(39.96225,-75.13222), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map'), options); 

    //marker cluster
    mc = new MarkerClusterer(map, [], mcOptions);

    for (i=0; i<address.length; i++) { 
        geocodeAddress(address[i],i);
    }

}       
</script> 

সম্পাদনা: মন্তব্য প্রতিক্রিয়া

বিকল্পভাবে, আপনি প্রতিটি কাকতালীয় মার্কারের অবস্থানের জন্য একটি ছোট (উদাহরণস্বরূপ .999999 এবং 1.000001 এর মধ্যে র‌্যান্ডম সংখ্যা) প্রয়োগ করে কাকতালীয় চিহ্নগুলিকে টানতে পারেন। এখানে একটি উদাহরণ। এটি প্রথম উদাহরণ হিসাবে একই ডেটা ব্যবহার করছে, বাদে 1 এবং 2 চিহ্নিতকারীকে একে অপরের উপরে স্থাপন করা এবং একটি ইনফাইন্ডো ভাগ করে নেওয়ার পরিবর্তে, চিহ্নিতকারী 2 চিহ্নিতকারী থেকে অফসেট করা হয়েছে। নোট করুন যে আপনার জিওকোডের ফলাফলগুলি একটি হতে চলেছে সামান্য কম নির্ভুল। নীচে সম্পর্কিত কোড:

//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;

    function createMarker(latlng,text) {

        ///get array of markers currently in cluster
        var allMarkers = mc.getMarkers();

        //final position for marker, could be updated if another marker already exists in same position
        var finalLatLng = latlng;

        //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
            for (i=0; i < allMarkers.length; i++) {
                var existingMarker = allMarkers[i];
                var pos = existingMarker.getPosition();

                //if a marker already exists in the same position as this marker
                if (latlng.equals(pos)) {

                    //update the position of the coincident marker by applying a small multipler to its coordinates
                    var newLat = latlng.lat() * (Math.random() * (max - min) + min);
                    var newLng = latlng.lng() * (Math.random() * (max - min) + min);

                    finalLatLng = new google.maps.LatLng(newLat,newLng);

                }                   
            }
        }

        var marker = new google.maps.Marker({
            position: finalLatLng
        });     

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close();
            infowindow.setContent(text);
            infowindow.open(map,marker);
        });

        return marker;
    }

Comments

জবাবের জন্য ধন্যবাদ. এই প্রকল্পে ফিরে আসছি! ঠিক আছে, মার্কারকে কি সামান্য কিছুটা অফসেট করা সম্ভব হবে? জড়িত সংস্থাগুলির ধরণ যুক্তিযুক্ত হবে যে তথ্য উইন্ডোতে অন্যথায় কে ছিল অন্যথায় (ক্ষুদ্রতম আমি জানি!)।

— রব

ক্যাসি সুন্দর কাজ। দারুণ লাগছে!

— রায়ানকডাল্টন

@ ক্যাসি উত্তরের জন্য ধন্যবাদ, আমি কীভাবে আমার কোডটিতে এটি কাজ করতে পারি? আমি এই মত কোডিং কোড সঙ্গে সংগ্রাম! এখানে আমার উত্স - দর্শন-উত্স: মেডিওয়েসস

— রব

@ রব গাইড হিসাবে আমার উদাহরণ পৃষ্ঠাটি ব্যবহার করুন। আমাদের কোডের মধ্যে একটি বড় পার্থক্য হ'ল আমি আমার জিওকোড অ্যাড্রেস কোড থেকে আমার তৈরি মার্কার কোডটি টেনে এনে ক্রিয়েটমার্কার নামক নিজস্ব ফাংশনে রেখেছি। কাজ করার জন্য নজ কৌশলটি পেতে আপনাকে এটিও করতে হবে।

— কেসি 16

@ ক্যাসি আমার বেশ কয়েকটি চেষ্টা হয়েছে এবং এটি কাজ করতে পারছে না ... আমি এটির মতো শব্দটি শুনতে চাই না আমি আপনাকে কেবল এটি করতে চাই তবে আমি শেষ দিনের জন্য চেষ্টা করে যাচ্ছি।

— রব

Answer 2

বিক্রয় অঞ্চল অ্যাপ্লিকেশনটির জন্য ঠিক একই ল্যাট / লম্বায় বেশ কয়েকটি চিহ্নিতকারীকে নিয়ে আমার একই সমস্যা ছিল। এটি একই ঠিকানায় একাধিক গ্রাহক সহ আমার অ্যাপ্লিকেশনটিতে একটি সাধারণ দৃশ্য ছিল, উদাহরণস্বরূপ একই আকাশচুম্বী বিল্ডিংয়ের গ্রাহকরা এবং একইভাবে একই শারীরিক রাস্তার ঠিকানায়।

ওভারল্যাপিং চিহ্নিতকারীদের জন্য সম্ভবত আরও ভাল ব্যবহারকারীর অভিজ্ঞতা (ইউএক্স) সহ আমি একটি বিকল্প উত্তর পেয়েছি । ওভারল্যাপিংমার্কারস্পাইডারফায়ার লাইব্রেরি তৈরির জন্য জর্জ ম্যাকেরনকে ধন্যবাদ । গুগল ম্যাপস ভি 3 এর জন্য এই জাভাস্ক্রিপ্ট লাইব্রেরি ওভারল্যাপিং চিহ্নিতকারীদের জন্য ডিফল্ট ক্লিক আচরণকে ওভাররাইড করে। লাইব্রেরি আপনাকে ওভারল্যাপিংয়ের জন্য অফসেট ব্যাসার্ধটি কনফিগার করতে সক্ষম করে (ডিফল্ট 20 পিক্সেল)।

Http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html এর স্ক্রিনশটগুলি উদাহরণ :

Answer 3

আমি উপরের ফাংশনটি নিম্নরূপে পরিবর্তন করার প্রস্তাব দিচ্ছি কারণ প্রাপ্ত ফলাফল আমাকে আরও ভাল বলে মনে হচ্ছে।

function adjustMarkerPlace(latlng) {
  ///get array of markers currently in cluster 
  //final position for marker, could be updated if another marker already exists in same position
  var finalLatLng = latlng;

  //check to see if any of the existing markers match the latlng of the new marker
  if (markers.length !== 0) {
      for (let i=0; i < markers.length; i++) {
          var existingMarker = markers[i];
          var pos = existingMarker.getPosition();

          //check if a marker already exists in the same position as this marker
          if (latlng.equals(pos)) {

              //update the position of the coincident marker by applying a small multipler to its coordinates
              var newLat = latlng.lat() + (Math.random() / 10000);
              var newLng = latlng.lng() + (Math.random() / 10000);

              finalLatLng = new google.maps.LatLng(newLat,newLng);

          }
      }
  }

  return finalLatLng;

}