多个标记位于相同位置的谷歌地图上,因此重叠标记

时间:2014-07-11 04:11:13

标签: angularjs

      {literal}
<script type="text/javascript">
function TypeaheadCtrl($scope, $http, $compile) {
    var firstLoad = true;
    var markerClusterer = null;
    var oms = null;
    $scope.myMarkers = [];
    $scope.infoWindow = new google.maps.InfoWindow();
    $scope.mapOptions = {
        center: new google.maps.LatLng(41.222298, -73.439740),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    $scope.getDynamicMin = function(){ $scope.dynamic_min; }
    $scope.getDynamicMax = function(){ $scope.dynamic_min; }
    $scope.dynamic_value = ($scope.dynamic_max - $scope.dynamic_min)/2;
    $scope.SliderCtrlFn = function(vrange) {
        $scope.min = (vrange >= 1 && vrange <=3) ? 1 : (vrange >=4 && vrange <=15) ? 18 : (vrange >= 16 && vrange <=25) ? 25 : (vrange >= 26 && vrange <=36) ? 36 : (vrange >= 37 && vrange <=51) ? 45 : 60;
        $scope.max = (vrange >= 1 && vrange <=3) ? 130 : (vrange >=4 && vrange <=15) ? 24  : (vrange >= 16 && vrange <=25) ? 35 : (vrange >= 26 && vrange <=36) ? 44 :(vrange >= 37 && vrange <=51) ? 59: 130;
        $scope.getcontacts('Age');
    }
    $scope.Gender_selectAction = function () {
        $scope.getcontacts('Gender');
    }
    $scope.genders = [{value: '1',name: 'Female'}, {value: '2',name: 'Male'}]; 
    $scope.getcontacts = function (fieldname) {
        CDname = $scope.cong_dist;
        SDname = $scope.senate_dist;
        Assembly = $scope.assembly_dist;
        Pname = $scope.precinct_name;
        Citycode = $scope.city_code;
        Gender = $scope.Gender;
        Minage = $scope.min;
        Maxage = $scope.max;

        var dataUrl = {/literal}"{crmURL p='civicrm/contact/mapcontacts/filter/getcontacts' }"{literal};
        return $http.get(dataUrl, {
            params: {
                fieldName:fieldname,
                CDname:CDname,
                SDname:SDname,
                Assembly:Assembly,
                Pname:Pname,
                Citycode:Citycode,
                Gender:Gender,
                Minage:Minage,
                Maxage:Maxage,
                sensor: false
            }
        }).then(function(res){
            $scope.myMarkers = [];
            if(res.data && res.data != "null" && res.data != ""){
                var infoWindow=$scope.infoWindow;
                angular.forEach(res.data, function(item){
                    marker = $scope.createmarker(item,infoWindow);
                    var oms = new OverlappingMarkerSpiderfier($scope.nggMap);
                    $scope.myMarkers.push(marker);
                });
                $scope.infoWindow.close();
                var markerCluster = new MarkerClusterer($scope.nggMap, $scope.myMarkers);
            }
            return $scope;
        });
    }
    $scope.createmarker = function(item,infoWindow){
        var point  = new google.maps.LatLng(item.geo_code_1,item.geo_code_2);
        var marker = new google.maps.Marker({
            map: $scope.nggMap,
            position: point,
            contactid: item.contact_id,
            title: item.display_name ,
            zIndex: google.maps.Marker.MAX_ZINDEX + 5           
        }); //,animation: google.maps.Animation.DROP
        marker.content = '<div class="infoWindowContent">' + item.display_name + '</div>';
        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.content + '</h2>');
            infoWindow.open($scope.nggMap, marker);
        });
        oms.addMarker(marker);
        return marker;
    }
    ms.addListener('click', function(marker, event) {
 $scope.infoWindow.open($scope.nggMap, marker);
});
}
</script>
{/literal}

所以我想使用OverlappingMarkerSpiderfier任何人都可以帮助我如何使用它? 我已经在我的HTML中使用了库。

并把OverlappingMarkerSpiderfier代码我收到错误,所以任何人都可以帮我解决这个问题。

1 个答案:

答案 0 :(得分:0)

尝试使用Like

for (var i = 0; i < window.mapData.length; i ++) {
  var datum = window.mapData[i];
  var loc = new gm.LatLng(datum.lat, datum.lon);
  var marker = new gm.Marker({
    position: loc,
    title: datum.h,
    map: map
  });
  marker.desc = datum.d;
  oms.addMarker(marker);  // <-- here
}

您将找到详细信息doc。有关此问题的代码请参阅此link