Question

我正在使用谷歌地图，但如果相同的位置在db中，则标记重叠，我该如何解决这个问题。我在运行时获取数据。我正在使用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

使用angularjs在谷歌地图上重叠标记

1 个答案: