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