マーカーリスト使用中の他のマーカーに特異的なマーカーショーを設定する方法角度Googleが

Question

をマッピングし、私はAngular Google Maps、私はマップ内のいくつかのマーカーを持って使用しています：

$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 
    } 

]; 

これは私の例です：Here

私は、特定のz-indexをマーカーの青（IDが5）に設定することを常にマーカーアイコンの赤（IDは4）または他のマーカーに表示したいと思います。そして、lat、longを気にしないでください。 z-indexを使用できない場合は、別の方法を教えてください。

注：マーカーの青のインデックスは、マーカー配列では常に0です。

お世話になりました。ありがとうございます。

Answer 1

2つのプロパティを指定する必要がマーカオブジェクトのz順序（google.maps.Marker）を制御する

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

]; 

例

どの `Z-index`せず、別の方法

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

google-mapsがキャンバスを作ってレンダリングしているため、マーカーのZ-インデックスを送信できません。 故意にz-indexを変更したい場合は、それに応じてマーカーイメージを変更する必要があります.Googleマップがレンダリングされるとz-indexを変更できないためです。以下に示すように

z-index: <value> 
optimized:false 

angular-google-mapsライブラリの場合は、あなたがz-index & optimizedプロパティを設定することができ：