NgMap 信息窗口未与标记对齐

Question

我正在使用 ngMap，但信息窗口没有与标记对齐。它们通常出现在其标记的左上方约 50 像素处。我应该注意到它最初确实有效，然后我们从 Mongo 更改为 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

信息window的无效定位可能确实与输入数据有关。例如，对于输入数据：

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
      }
    ];

第二个标记的信息 window 将被错误定位：

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>

NgMap 信息窗口未与标记对齐

NgMap infowindow not aligned with markers

angularjs

google-maps

google-maps-api-3

ng-map