AngularJS için Google haritalar - İşaretçi tıklandığında InfoWindow doğru konumda ayarlanmadı

Question

AngularJS için Google Maps kullanan bir harita var, iki işaretçisi var ve her işaretçi bir infoWindow veri ile gösterir.

İşaretçiyi ilk kez tıklattığımda, her şey düzgün çalışıyor. İkinci işaretleyiciyi tıklatırsam, yine de doğru şekilde çalışır. Ancak ilk işaretleyiciyi tekrar tıklattığımda, infoWindow kendi konumunu değiştirmez: ilk işaretleyiciyle ilişkilendirilmiş veriler, ikinci işaretleyici üzerinde bir infoWindow üzerinde gösterilir ve ilk önce değil.

Bu soruna neden olan nedir?

Benim html kodu:

<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control='map.control'> 
     <ui-gmap-markers models="places" coords="'coords'" idKey="'idKey'" isLabel="true" options="'options'" events='map.markerEvents'></ui-gmap-markers> 
     <ui-gmap-window coords="mapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()" ng-cloak> 
      //SOME CODE HERE 
     </ui-gmap-window> 
    </ui-gmap-google-map> 

bir işaretleyici ile ilişkili tıklama etkinliği: windowOptions ait

$scope.map = { center: { latitude: 43, longitude: -8.3 }, zoom: 8, control: {}, markerEvents: { 
    click: function(marker){ 
     if(marker.model.title != USER_LOCATION){ 
      $scope.onClick(marker.model); 
      $scope.mapOptions.markers.selected = marker.model; 
     } 
    } 
}, options: $scope.mapOptions}; 

içeriği:

$scope.windowOptions = { 
    show: false, 
    boxClass: "infobox", 
    boxStyle: { 
     backgroundColor: "transparent", 
     border: "1px solid #C7CECE", 
     borderRadius: "5px", 
     width: "85%" 
    }, 
    disableAutoPan: false, 
    maxWidth: 0, 
    infoBoxClearance: new google.maps.Size(1, 1), 
    pixelOffset: new google.maps.Size(-175, -250), 
    zIndex: null, 
    /*closeBoxMargin: "10px", 
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",*/ 
    isHidden: false, 
    pane: "floatPane", 
    enableEventPropagation: false 
}; 

Ben düğmesini kullanın "x" İşaretçiyi kapatmak için artık bu sorun olmaz. Ancak kullanıcının infoWindow'u manuel olarak kapatmasını istemiyorum.

Herhangi bir yardım için teşekkür ederiz! Teşekkür

DÜZENLEME: Ben mapOptions kodu içerir:

$scope.mapOptions = { 
    minZoom: 3, 
    zoomControl: false, 
    draggable: true, 
    navigationControl: false, 
    mapTypeControl: false, 
    scaleControl: false, 
    streetViewControl: false, 
    disableDoubleClickZoom: false, 
    keyboardShortcuts: true, 
    markers: { 
     selected: {} 
    } 
}; 

Answer 1

Ben Karşılaştığınız sorunu yeniden mümkün değildi ancak aşağıdaki örnek işaretleyici tıklamasında bilgi penceresini görüntülemek gösterilmiştir:

angular.module('appMaps', ['uiGmapgoogle-maps']) 
 
    .controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
 

 
     $scope.places = [ 
 
      { idKey: 1, name: "Brisbane", coords: { latitude: -33.867396, longitude: 151.206854 } }, 
 
      { idKey: 2, name: "Sydney", coords: { latitude: -27.46758, longitude: 153.027892 } }, 
 
      { idKey: 3, name: "Perth", coords: { latitude: -31.953159, longitude: 115.849915 } } 
 
     ]; 
 

 
     var USER_LOCATION = ''; 
 

 

 
     uiGmapGoogleMapApi.then(function(maps) { 
 
      $scope.map = { 
 
       center: { latitude: -30, longitude: 135.0 }, 
 
       zoom: 4, 
 
       control: {}, 
 
       markerEvents: { 
 
        click: function(marker) { 
 
         if (marker.model.title != USER_LOCATION) { 
 
          $scope.onClick(marker.model); 
 
          $scope.mapOptions.markers.selected = marker.model; 
 
         } 
 
        } 
 
       }, 
 
       options: $scope.mapOptions 
 
      }; 
 

 

 
      $scope.windowOptions = { 
 
       show: false, 
 
       pixelOffset: new google.maps.Size(0, -32), 
 
       /*boxClass: "infobox", 
 
       boxStyle: { 
 
        backgroundColor: "transparent", 
 
        border: "1px solid #C7CECE", 
 
        borderRadius: "5px", 
 
        width: "85%" 
 
       }, 
 
       disableAutoPan: false, 
 
       maxWidth: 0, 
 
       infoBoxClearance: new google.maps.Size(1, 1), 
 
       zIndex: null, 
 
       isHidden: false, 
 
       pane: "floatPane", 
 
       enableEventPropagation: false*/ 
 
      }; 
 
     }); 
 

 
     $scope.mapOptions = { 
 
      minZoom: 3, 
 
      zoomControl: false, 
 
      draggable: true, 
 
      navigationControl: false, 
 
      mapTypeControl: false, 
 
      scaleControl: false, 
 
      streetViewControl: false, 
 
      disableDoubleClickZoom: false, 
 
      keyboardShortcuts: true, 
 
      markers: { 
 
       selected: {} 
 
      } 
 
     }; 
 

 

 

 

 

 
     $scope.onClick = function(data) {  
 
      $scope.windowOptions.show = true; 
 
     }; 
 

 
     $scope.closeClick = function() { 
 
      $scope.windowOptions.show = false; 
 
     }; 
 

 
    });

.angular-google-map-container { height: 480px; }

<script src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script> 
 

 
<div ng-app="appMaps" ng-controller="mapCtrl"> 
 
    <ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control='map.control'> 
 
     <ui-gmap-markers models="places" coords="'coords'" idKey="'idKey'" isLabel="true" options="'options'" events='map.markerEvents'></ui-gmap-markers> 
 
     <ui-gmap-window coords="mapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()" ng-cloak> 
 
      Some info goes here 
 
     </ui-gmap-window> 
 
    </ui-gmap-google-map> 
 
</div>