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

我想将标记为蓝色（id为5）的特定z-index设置为始终显示在标记图标红色（id为4）或其他标记上。并且不关心它的lat，long。如果无法使用z-index，请给我另一种方法。

注意：标记蓝色的索引在标记数组中始终为0 。

希望你帮助我，谢谢。

Answer 1

要控制标记对象的z顺序（google.maps.Marker），需要指定两个属性：

z-index: <value>
optimized:false

如果是angular-google-maps库，您可以设置z-index＆amp; 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

Answer 2

我们无法发送标记的z-index，因为google-maps正在制作一个游戏，然后进行渲染。因此，如果您故意想要更改z-index，则必须相应地更改标记图像，因为一旦渲染了谷歌地图，我们就无法更改z索引。

如何在标记列表中的其他标记上设置特定标记显示使用Angular Google地图

2 个答案: