Điểm đánh dấu của Google tại cùng một địa chỉ không hiển thị tất cả các điểm đánh dấu

Tôi đã làm việc trên bản đồ này - http://www.mediwales.com/mapping/test/

Đó là âm mưu của các công ty tốt và phân cụm chúng ổn, nhưng một vấn đề đã nảy sinh với các công ty trong cùng tòa nhà có cùng địa chỉ. Nó chỉ hiển thị một công ty chứ không phải tất cả trong số họ.

Làm thế nào tôi có thể làm cho nó hiển thị tất cả các công ty ở cùng một địa chỉ?

Điểm đánh dấu được mã hóa địa lý bằng tên / số tòa nhà, đường phố, thành phố, mã bưu điện. Tôi đoán các điểm đánh dấu ở đó là một tòa nhà có 3 công ty hiển thị 3 trong cụm. Tuy nhiên, khi bạn nhấp vào nó, nó chỉ hiển thị một công ty.

CẬP NHẬT:

Tôi đã quản lý để làm cho chúng bù đắp, nhưng nó bù đắp tất cả các điểm đánh dấu khi tôi chỉ muốn nó bù đắp nếu có nhiều hơn một điểm đánh dấu giống nhau. (Cảm ơn câu trả lời của Casey).

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

Các clusterer được hiển thị chính xác. Tất cả các điểm đánh dấu đang được vẽ. Vấn đề là bạn chỉ có thể nhấp vào điểm đánh dấu trên cùng, làm cho có vẻ như chỉ có một điểm đánh dấu.

Để xem nội dung cho các điểm đánh dấu trùng khớp, bạn sẽ phải chuyển nội dung bên trong của các điểm đánh dấu bên dưới đến điểm đánh dấu cao nhất.

Để làm điều này, trước tiên, theo dõi từng điểm đánh dấu. Bạn đang sử dụng MarkerClusterer, do đó, đối tượng MarkerClusterer sẽ giữ từng điểm đánh dấu. Khi mỗi kết quả mã địa lý quay trở lại, hãy so sánh độ trễ của yêu cầu đó với tất cả các điểm đánh dấu đã được vẽ. Bạn có thể so sánh các vị trí bằng cách sử dụng phương thức bằng của đối tượng latlng .

Nếu điểm đánh dấu mới phù hợp với vị trí của điểm đánh dấu hiện có, hãy lấy nội dung infowindow từ điểm đánh dấu đầu tiên và nối nó vào nội dung infowindow của điểm đánh dấu mới. Bằng cách này, khi bạn nhấp vào điểm đánh dấu cao nhất (công ty thứ hai), nó sẽ hiển thị thông tin từ cả hai công ty. Nếu có nhiều hơn hai công ty, bạn sẽ cần lấy các nội dung không phù hợp cho tất cả các điểm đánh dấu phù hợp. Phương pháp này cũng sẽ cho phép trình phân cụm đánh dấu vẫn hiển thị đúng số điểm đánh dấu.

Dưới đây là một ví dụ hoạt động và mã javascript. Địa chỉ thứ nhất và thứ hai là như nhau. Khi bạn nhấp vào điểm đánh dấu cho 2, nó sẽ hiển thị "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> 

EDIT: Trả lời bình luận

Ngoài ra, bạn có thể nâng cấp các điểm đánh dấu trùng hợp bằng cách áp dụng một số nhân nhỏ (số ngẫu nhiên trong khoảng từ 0,999999 đến 1,000001) vào vị trí của từng điểm đánh dấu trùng khớp. Đây là một ví dụ. Điều này đang sử dụng cùng một dữ liệu như ví dụ đầu tiên, ngoại trừ, thay vì các điểm đánh dấu 1 và 2 được đặt lên nhau và chia sẻ một infowindow, điểm đánh dấu 2 được bù từ điểm đánh dấu 1. Lưu ý rằng kết quả mã địa lý của bạn sẽ là một ít chính xác Mã liên quan dưới đây:

//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;
    }

Tôi gặp vấn đề tương tự với một số điểm đánh dấu ở cùng một lat / long cho một ứng dụng lãnh thổ bán hàng. Đây là một tình huống phổ biến trong ứng dụng của tôi với nhiều khách hàng ở cùng một địa chỉ, ví dụ như các khách hàng trong cùng tòa nhà chọc trời và do đó tại cùng một địa chỉ đường phố thực.

Tôi tìm thấy một câu trả lời thay thế có lẽ là trải nghiệm người dùng (UX) tốt hơn cho các điểm đánh dấu chồng chéo. Nhờ George MacKerron để tạo OverlappingMarkerSpiderfier thư viện. Thư viện JavaScript cho Google Maps v3 này ghi đè hành vi nhấp mặc định cho các điểm đánh dấu chồng chéo. Thư viện cho phép bạn định cấu hình bán kính bù cho chồng lấp (mặc định là 20 pixel).

Ví dụ Ảnh chụp màn hình từ http://jawj.github.io/OverlickingMarkerSpiderfier/demo.html :

Tôi đề nghị thay đổi chức năng trên như sau vì kết quả thu được có vẻ tốt hơn đối với tôi.

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;

}