Question

在我的网站上，我有一个允许用户注册的表单。它要求用户提供他们的城市，州和国家。我还有一张地图，根据从该城市，州，国家/地区组合（$ location）中提取的纬度/经度，为每个用户删除一个标记。

因为我不是超级特定的（因为我不是要求他们的ACTUAL地址），我有许多用户具有相同的lat / lng。这在尝试查看地图上的标记时会产生问题。

我应该使用群集服务吗？如果是的话，你有什么建议吗？就像我说的，信息来自mySQL数据库 - ＆gt; XML - ＆gt; PHP。

如果是这样，它将被聚集在最放大的水平（就像我说的，相同的纬度/经度）。因此，我将需要一个信息窗口，允许我选择该特定位置的每个用户。

想法？建议???非常感谢!!!

杰里米

Answer 1

MarkerClusterer：http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/examples.html

或手工（粗略 - 只是示例代码！）

        var latlng = new google.maps.LatLng(-33.8671390, 151.2071140);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var markers = [];
        var newmarkers = [];

        for(var j=0; j<5; j++) {
            markers.push({lat:-33.8671390, lng:151.2071140, title:'This is marker #' + i });

            if(j==0) newmarkers.push(markers[j]);
            for(var i=0; i<newmarkers.length; i++) {
                if(newmarkers[i].lat == markers[j].lat && newmarkers[i].lng == markers[j].lng) {
                    newmarkers[i].title += ' AND ' + markers[j].title;
                    continue;
                }
                newmarkers.push(markers[j]);
            }
        }

        for(var i=0; i<newmarkers.length; i++) {
            var mkr = new google.maps.Marker({
                position: new google.maps.LatLng(newmarkers[i].lat, newmarkers[i].lng), 
                map: map, 
                title: newmarkers[i].title
            });
        }

Answer 2

以为我会粘贴我的代码：



function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(47.614495, -122.341861), 2);
    map.enableScrollWheelZoom();

GDownloadUrl("world_xml.php", function(data) {
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var first_name = markers[i].getAttribute("first_name");
    var last_name = markers[i].getAttribute("last_name");
    var email = markers[i].getAttribute("email");
    var affiliation = markers[i].getAttribute("affiliation");
    var status = markers[i].getAttribute("status");
    var service = markers[i].getAttribute("service");
    var rank = markers[i].getAttribute("rank");
    var specialty = markers[i].getAttribute("specialty");
    var city = markers[i].getAttribute("city");
    var state = markers[i].getAttribute("state");
    var country = markers[i].getAttribute("country");
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
    var marker = createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country);
    map.addOverlay(marker);
  }
});

GDownloadUrl("world_xml.php", function(data) {
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var first_name = markers[i].getAttribute("first_name");
    var last_name = markers[i].getAttribute("last_name");
    var email = markers[i].getAttribute("email");
    var affiliation = markers[i].getAttribute("affiliation");
    var status = markers[i].getAttribute("status");
    var service = markers[i].getAttribute("service");
    var rank = markers[i].getAttribute("rank");
    var specialty = markers[i].getAttribute("specialty");
    var city = markers[i].getAttribute("city");
    var state = markers[i].getAttribute("state");
    var country = markers[i].getAttribute("country");
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
    var marker = createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country);
    map.addOverlay(marker);
  }
});

} }



function createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country) {
  var marker = new GMarker(point);
  var html = "" + rank + " " + first_name + " " + last_name + " 
" + service + ", " + status + " 
" + specialty + " 
" + affiliation + " 
" + city + ", " + state + " " + country + " 
" + email + " 
" + " ";
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

群集相同的lat / lng gmaps v3

2 个答案: