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
}
];
이것은 내 예입니다. 여기
z-index마커 파란색 (id는 5)에 항상 마커 아이콘 빨간색 (id는 4) 또는 다른 마커에 표시되도록 설정하고 싶습니다 . 그리고 걱정하지 않는다 lat, long그것을. 사용할 수없는 경우 z-index다른 방법을 알려주십시오.
참고 : 마커 파란색의 인덱스는 markers 배열에서 항상 0입니다 .
도와주세요, 감사합니다.
마커 객체 ( 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다