Wie auf einem anderen Marker in Marker-Liste Verwendung spezifischer Marker zeigen einstellen Angular Google Maps

Question

Ich Angular Google Maps verwenden, ein ich einige Markierungen in der Karte haben:

$scope.markers = [ 
    { 
    id: 5, 
    latitude: 44.4284821, 
    longitude: 26.1241451, 
    icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue.png' 
    }, 
    { 
    id: 4, 
    latitude: 43, 
    longitude: 26.1241451 
    } 

]; 

Das ist mein Beispiel: Here

Ich würde gerne setzen z-index auf Marker blau (ID ist 5) immer auf Marker-Symbol rot (ID ist 4) oder andere Marker. Und kümmert sich nicht um lat, long davon. Wenn Sie z-index nicht verwenden können, geben Sie mir bitte eine andere Möglichkeit.

Hinweis: Der Index des Markierungsblatts ist immer 0 im Markierungsfeld.

Hoffen Sie, dass Sie mir helfen, danke.

Answer 1

z-Reihenfolge für Marker Objekte steuern (google.maps.Marker) zwei braucht Eigenschaften angegeben werden:

z-index: <value> 
optimized:false 

Bei angular-google-maps Bibliothek Sie z-index & optimized Eigenschaften wie unten gezeigt einstellen könnte:

<ui-gmap-markers models="markers" options="'options'" coords="'self'" icon="'icon'" zIndex="'zIndex'" optimized="'optimized'"> 
</ui-gmap-markers> 

$scope.markers = [ 
    { 
    id: 5, 
    latitude: 44.4284821, 
    longitude: 26.1241451, 
    icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue.png', 
    options : { 
     zIndex: 923, 
     optimized: false 
    } 
    }, 
    { 
    id: 4, 
    latitude: 43, 
    longitude: 26.1241451, 
    options : { 
     zIndex: 611, 
     optimized: false 
    } 
    } 

]; 

Beispiel

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

 
    $scope.markers = [ 
 
     { 
 
     id: 5, 
 
     latitude: 44.4284821, 
 
     longitude: 26.1241451, 
 
     icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue.png', 
 
     options : { 
 
      zIndex: 923, 
 
      optimized: false 
 
     } 
 
     }, 
 
     { 
 
     id: 4, 
 
     latitude: 43, 
 
     longitude: 26.1241451, 
 
     options : { 
 
      zIndex: 611, 
 
      optimized: false 
 
     } 
 
     } 
 

 
    ]; 
 

 
    $scope.map = { 
 
     center: { 
 
     latitude: 32, 
 
     longitude: 15 
 
     }, 
 
     zoom: 4, 
 
     bounds: {}, 
 
     markers: { 
 
     models: [], 
 
     type: 'cluster', 
 
     typeOptions: { 
 
      minimumClusterSize: 12, 
 
      gridSize: 60 
 
     } 
 
     }, 
 
     options: { 
 
     mapTypeControl: true, 
 
     zoomControl: true, 
 
     streetViewControl: true, 
 
     scrollwheel: true 
 
     } 
 
    }; 
 

 
    });

html, body, #map_canvas { 
 
      height: 100%; 
 
      width: 100%; 
 
      margin: 0px; 
 
     } 
 

 
     #map_canvas { 
 
      position: relative; 
 
     } 
 

 
     .angular-google-map-container { 
 
      position: absolute; 
 
      top: 0; 
 
      bottom: 0; 
 
      right: 0; 
 
      left: 0; 
 
     }

<script src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
 
    <script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script> 
 
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl"> 
 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" bounds="map.bounds"> 
 
     <ui-gmap-markers models="markers" options="'options'" coords="'self'" icon="'icon'" zIndex="'zIndex'" optimized="'optimized'"> 
 
     </ui-gmap-markers> 
 
    </ui-gmap-google-map> 
 
</div>

Modified plunker

Answer 2

wir können den z-index der marker nicht senden, weil google-maps eine leinwand macht und dann gerendert wird. Also, wenn Sie absichtlich den Z-Index ändern möchten, müssen Sie die Markierungsbilder entsprechend ändern, denn sobald die Google Map gerendert wird, können wir den Z-Index nicht ändern.