谷歌地圖上使用angularjs重疊標記

Question

我使用谷歌地圖，但標記重疊，如果相同的位置來到數據庫，我該如何解決這個問題。我在運行時獲取數據。我正在使用angularjs，請幫忙...？

這是我的html頁面： -

</custom-marker> 

    <info-window id="foo-iw"> 
    <div ng-non-bindable=""> 
     <div style=" border-style: solid;border-color:black;margin-top:4px;background-color:#DEDBDA";width:100%;> 
      <div style="margin : 7px;color: black;background-color:#DEDBDA;width:96%;"> 
       <b>Serial No :</b> {{vm.pump.serialNo}}<br/> 
       <b>Customer :</b> {{vm.pump.customer}}<br/> 
       <b>Protocol :</b> {{vm.pump.protocol}}<br/> 
       <b>Location :</b> {{vm.pump.address}}<br/> 
       <b>Last Access Time :</b> {{vm.pump.lastAccessTime | date:'d MMM, y hh:mm:ss a'}}<br/> 

       <b>Malfunction :</b> {{vm.pump.pumpInfo.malfunction}}&nbsp;&nbsp;<b>:</b>&nbsp;&nbsp; 
       {{errorData.malfunction[0][vm.pump.pumpInfo.malfunction]}}<br/> 

       <b>Warning :</b> {{vm.pump.pumpInfo.warning}}&nbsp;&nbsp;<b>:</b>&nbsp;&nbsp; 
       {{errorData.warning[0][vm.pump.pumpInfo.warning]}}<br/> 

       <b>Alarm :</b> {{vm.pump.pumpInfo.alarm}}&nbsp;&nbsp;<b>:</b>&nbsp;&nbsp; 
       {{errorData.alarm[0][vm.pump.pumpInfo.alarm]}} 
       <!-- {{errorData}} --> 
     </div> 
     </div> 
    </div> 
    </info-window> 
</ng-map> 

這是我的js文件： -

$scope.pumpMap = function(data){ 
     $scope.pumpError(); 
     var i=0;var mapData={}; 
      for(i=0;i<data.ScannedCount;i++){ 
       if(data.Items[i].hasOwnProperty("isActive")){ 
        mapData[i] ={position:[data.Items[i].pumpdetail.location.latitude, data.Items[i].pumpdetail.location.longitude], 
           serialNo:data.Items[i].serialno, isActive:data.Items[i].isActive, 
           lastAccessTime: data.Items[i].lastupdated, pumpInfo: data.Items[i].pumpdetail.results[0].pump_info, 
           address: data.Items[i].pumpaddress, customer: data.Items[i].company, protocol: data.Items[i].protocol}; 

       } 
      } 

      NgMap.getMap().then(function(map) { 
       console.log('map', map); 
       $scope.vm.map = map; 
       }); 

       $scope.vm.pumps = mapData; 
       $scope.vm.pump = $scope.vm.pumps[0]; 

       $scope.vm.showDetail = function(e, pump) { 
        $scope.vm.pump = pump; 

        $scope.vm.map.showInfoWindow('foo-iw', pump.serialNo); 
       }; 

       $scope.vm.hideDetail = function() { 
        $scope.vm.map.hideInfoWindow('foo-iw'); 
       }; 

       $scope.vm.currentIndex = 0; 
       $scope.vm.selectNextCustomMarker = function() { 
        $scope.vm.map.customMarkers[$scope.vm.currentIndex].removeClass('selected'); 
        $scope.vm.currentIndex = ($scope.vm.currentIndex+1) % $scope.vm.pumps.length; 
        $scope.vm.map.customMarkers[$scope.vm.currentIndex].addClass('selected'); 
        $scope.vm.currentPosition = $scope.vm.pumps[$scope.vm.currentIndex]; 
       } 

     }; 

Answer 1

您可以使用js-marker-clusterer庫爲大量標記渲染每個縮放級別的簇。

例

angular.module('mapApp', ['ngMap']) 
 

 
    .factory('mapService', function ($rootScope, $http) { 
 
     var mapService = { 
 
      getData: function() { 
 
       return $http.get('https://rawgit.com/vgrem/026677568e7726f22b8d130f4bd552fd/raw/data.json').then(function (response) { 
 
        return response.data; 
 
       }); 
 
      } 
 
     } 
 
     return mapService; 
 
    }) 
 

 
    .controller('mapController', function ($scope, NgMap, mapService) { 
 
     $scope.allMarkers = []; 
 
     NgMap.getMap({id:'myMap'}).then(function (map) { 
 
      $scope.map = map; 
 
      mapService.getData().then(function (data) { 
 

 
       $scope.allMarkers = data.map(function (item) { 
 
        var latLng = new google.maps.LatLng(item.position[0], item.position[1]); 
 
        return $scope.createMarker(latLng, item); 
 
       }); 
 
       $scope.markerClusterer = new MarkerClusterer(map, $scope.allMarkers, { 
 
        imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' 
 
       }); 
 

 
      }); 
 

 
     }); 
 

 

 
     $scope.createMarker = function (pos, info) { 
 
      var marker = new google.maps.Marker({ position: pos }); 
 
      google.maps.event.addListener(marker, 'click', function() { 
 
       $scope.selectedInfo = info; 
 
       $scope.map.showInfoWindow('myInfoWindow', this); 
 
      }); 
 
      return marker; 
 
     } 
 

 
    });

#myMap {width:100%; height:400px;}

<script src="https://maps.google.com/maps/api/js"></script> 
 
<script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script> 
 
<div ng-app="mapApp" ng-controller="mapController"> 
 
    <ng-map zoom="4" center="[43.6650000, -79.4103000]" id="myMap"> 
 
     <info-window id="myInfoWindow"> 
 
      <div ng-non-bindable> 
 
       <img ng-src="{{selectedInfo.photo}}" /> 
 
      </div> 
 
     </info-window> 
 
    </ng-map> 
 
</div>

Plunker