angularjs - 如何使用 Angular Google map 在标记列表中的另一个标记上设置特定标记显示

Question

我正在使用Angular Google Maps ，我在 map 上有一些标记:

$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

要控制标记对象 ( google.maps.Marker ) 的 z 顺序，需要指定两个属性:

z-index: <value>
optimized:false

如果是angular-google-maps您可以在库中设置 z-index 和 optimized 属性，如下所示:

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

]; 

示例

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