NgMap infowindow未與標記對齊

Question

我正在使用ngMap，但infowindows未與標記對齊。他們通常看起來大約在他們的標記左上方50px。我要指出它的工作原來，那我們從蒙戈改爲SQL，出於某種原因，它從來沒有後對準....

截圖

模板

<!-- the map --> 
    <ng-map 
     id="map" 
     scrollwheel="false" 
     class="row" 
     > 


     <marker 
     id="{{p.scheduleId}}" 
     ng-repeat="p in locatorGridData track by p.scheduleId" 
     position="{{p.latitude}}, {{p.longitude}}" 
     icon="{ 
      url:'app/assets/img/placeholder.png', 
      scaledSize:[30,30] 
     }" 
     on-click="vm.selectFromMap(p)" 
     class="markers" 
     ></marker> 



     <info-window id="infoWindow" visible-on-marker="vm.p.scheduleId"> 
     <div ng-non-bindable="" ng-click="vm.selectFromMap({},vm.p)" style="cursor: pointer;"> 
      <div class="practice-name">{{vm.p.locName}}</div> 
      <div class="name-specialty">{{vm.p.firstName}} {{vm.p.lastName}}, {{vm.p.speciality}}</div> 
      <div class="other-text-for-info-window"> 
      {{vm.p.address1}}<br> 
      {{vm.p.city}}, {{vm.p.state}}<br> 
      {{vm.p.zip}} 
      </div> 
     </div> 
     </info-window> 
    </ng-map> 

控制器

NgMap.getMap({id:'map'}).then(function(map) { 
     vm.map = map; 
     //GEOCODER 
     patientPos(vm.patientLat, vm.patientLon); 
    }); 

    function patientPos(patientLat, patientLon) { 
     console.log(patientLat,patientLon, 'patient coordinate') 
     var bounds2 = new google.maps.LatLngBounds(); 
     var latLng2 = new google.maps.LatLng($sessionStorage.patient_location.patientLat, $sessionStorage.patient_location.patientLon); 
     bounds2.extend(latLng2); 
     vm.map.fitBounds(bounds2); 
     vm.map.setZoom(12); 
    } 

    vm.showDetail = showDetail; 
    vm.hideDetail = hideDetail; 
    vm.selectFromMap = selectFromMap; 
    //info window stuff 
    function showDetail (e, p) { 
     vm.p = p; 
     console.log('showdetail', e, p) 
     vm.map.showInfoWindow('infoWindow', p.scheduleId); 
    }; 

    function selectFromMap(e,p){ 
     vm.p = p; 
     vm.map.showInfoWindow('infoWindow', p.scheduleId); 
     var getAllRows = $scope.grid1Api.core.getVisibleRows($scope.grid1Api.grid); 
     // c.log(getAllRows); 
     // console.log(schedules); 
     console.log(p) 
     vm.schedules.forEach(function(schedule,idx){ 
     if(schedule.scheduleId == p.scheduleId){ 
      $scope.grid1Api.selection.selectRow(vm.schedules[idx]); 

      console.log(schedules[idx]); 
      console.log(idx); 

      $scope.grid1Api.grid.getColumn('locName').filters[0] = { 
      term: vm.schedules[idx].locName 
      }; 
     } 
     }) 

    } 

    function hideDetail (e, p) { 
     if(vm.map){ 
     vm.map.hideInfoWindow('infoWindow'); 
     } 
    } 

Answer 1

信息窗口的無效定位可能確實與輸入數據有關。例如，對於輸入數據：

vm.locatorGridData = [ 
     { 
     "scheduleId": "Red square,Moscow", 
     "latitude": 55.7539303, 
     "longitude": 37.618601 
     }, 
     { 
     "scheduleId": 123, //Invalid key for marker, should be string 
     "latitude": 55.7469862, 
     "longitude": 37.5370785 
     } 
    ]; 

對於第二標記的信息窗口將被不正確地定位：

vm.map.showInfoWindow('infoWindow', p.scheduleId); 

第二個參數（marker id）有望作爲string正確地確定要被提供標記。

angular.module('mapApp', ['ngMap']) 
 
    .controller('mapController', function ($scope, NgMap) { 
 
    var vm = this; 
 

 
    vm.locatorGridData = [ 
 
     { 
 
     "scheduleId": "Red square,Moscow", 
 
     "latitude": 55.7539303, 
 
     "longitude": 37.618601 
 
     }, 
 
     { 
 
     "scheduleId": 123, //"The Moscow city", 
 
     "latitude": 55.7469862, 
 
     "longitude": 37.5370785 
 
     }, 
 
     /*{ 
 
     "scheduleId": "Invalid POI", 
 
     "latitude": "55.7469862", 
 
     "longitude": -37.5370785 
 
     }*/ 
 
    ]; 
 

 
    NgMap.getMap({ id: 'map' }).then(function (map) { 
 
     vm.map = map; 
 
    }); 
 

 
    vm.selectFromMap = function (e, p) { 
 
     vm.content = p.scheduleId; 
 
     vm.map.showInfoWindow('infoWindow', p.scheduleId.toString()); 
 

 
    }; 
 
    });

.row { 
 
    width: 100%; 
 
    height: 240px; 
 
    }

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
<div ng-app="mapApp" ng-controller="mapController as vm"> 
 

 
    <ng-map id="map" scrollwheel="false" class="row" center="[55.7539303,37.618601]" zoom="12"> 
 
    
 
    <marker id="{{p.scheduleId}}" ng-repeat="p in vm.locatorGridData track by p.scheduleId" position="{{p.latitude}}, {{p.longitude}}" 
 
     on-click="vm.selectFromMap(p)" icon='{ 
 
      "url":"https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png", 
 
      "scaledSize":[80,80] 
 
     }' class="markers"></marker> 
 

 
    <info-window id="infoWindow"> 
 
     <h2>{{vm.content}}</h2> 
 
    </info-window> 
 
    </ng-map> 
 
</div>