AGM์์ ์ฌ์ฉ์ ์ง์ ์คํ์ผ์ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ
๋๋ ์ด๊ฒ์ ์ข์ํ์๋ค
TS ํ์ผ์์
markers: any[] = [
{
lat: 51.673858,
lng: 7.815982,
label: 'A',
draggable: true
},
{
lat: 51.373858,
lng: 7.215982,
label: 'B',
draggable: false
},
{
lat: 51.323858,
lng: 7.255982,
label: 'D',
draggable: false
},
{
lat: 51.293858,
lng: 7.285982,
label: 'E',
draggable: false
},
{
lat: 51.353858,
lng: 7.305982,
label: 'F',
draggable: false
},
{
lat: 51.723858,
lng: 7.895982,
label: 'C',
draggable: true
}
]
styles: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
]
๊ทธ๋ฆฌ๊ณ ์ด๋ฐ ํ ํ๋ฆฟ์์
<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [styles]="styles">
<agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker *ngFor="let m of markers; let i = index"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label">
</agm-marker><!-- multiple markers -->
</agm-marker-cluster>
</agm-map>
ํ์ง๋ง ์ง๋ ํ ๋ง๊ฐ ์๋ํ์ง ์์ต๋๋ค. https://mapstyle.withgoogle.com/ ์์ ๋ค๋ฅธ ์คํ์ผ ๋งต์ ์ฌ์ฉํ ์ ์๋๋ก ๋์์ฃผ์๊ฒ ์ต๋๊น?
๋ชจ๋ ๋ต์ฅ
Map ๊ตฌ์ฑ ์์์ style
์
๋ ฅ์ MapTypeStyle
์ ํ์ ๊ฐ์ฒด ๋ฐฐ์ด์ ํ์ฉํ๋ฉฐ ์ด์ ์ ์ฌ์ฉํ ์ ์ด ์๊ธฐ ๋๋ฌธ์ ํ์คํ ์๋ํฉ๋๋ค.
์์ ๋ฅผ ๋ ์งง๊ฒ ๋ง๋์ธ์. ์ด๋ฌํ ์คํ์ผ์ด ๋ชจ๋ ํ์ํ ๊ฒ์ ์๋๋๋ค. ๊ฐ๋ฅํ ์ค๋ฅ๋ฅผ ๊ตฌ๋ฌธ ๋ถ์ํ๊ณ ํ์ธํ๋ ๊ฒ์ด ๋ ์ฝ์ต๋๋ค. ๋ํ AGM์์ ๋ฐ์ํ ์ ์๋ ๋ฒ๊ทธ๋ฅผ ์กฐ์ฌํ๋ ค๋ฉด ๋ณต์ ๊ฐ ํ์ํฉ๋๋ค. ๋ฐ๋ผ์ ๋ฌธ์ ๊ฐ ์๋๊ฑฐ๋ ์ฌ์์ฐ์ด ๋ถ์กฑํ๊ธฐ ๋๋ฌธ์ ์ด๊ฒ์ ๋ซ๊ฒ ์ต๋๋ค.
์ด๊ฒ์ ๋๋ฅผ ์ํด ์ผํ์ต๋๋ค.
์คํ์ผ: [] = [
{
"์์ ์ ํ": "๊ธฐํํ",
"์คํ์ผ๋ฌ": [
{
"์์": "#212121"
}
]
}
๋๋ ์ถ๊ฐํ๋ค [] =
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด๊ฒ์ ๋๋ฅผ ์ํด ์ผํ์ต๋๋ค.
์คํ์ผ: [] = [
{
"์์ ์ ํ": "๊ธฐํํ",
"์คํ์ผ๋ฌ": [
{
"์์": "#212121"
}
]
}
๋๋ ์ถ๊ฐํ๋ค [] =