Angular-google-maps: AGM์— ํ…Œ๋งˆ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•

์— ๋งŒ๋“  2018๋…„ 02์›” 17์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: SebastianM/angular-google-maps

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/ ์—์„œ ๋‹ค๋ฅธ ์Šคํƒ€์ผ ๋งต์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด๊ฒƒ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ–ˆ์Šต๋‹ˆ๋‹ค.

์Šคํƒ€์ผ: [] = [
{
"์š”์†Œ ์œ ํ˜•": "๊ธฐํ•˜ํ•™",
"์Šคํƒ€์ผ๋Ÿฌ": [
{
"์ƒ‰์ƒ": "#212121"
}
]
}

๋‚˜๋Š” ์ถ”๊ฐ€ํ–ˆ๋‹ค [] =

๋ชจ๋“  3 ๋Œ“๊ธ€

๋ชจ๋“  ๋‹ต์žฅ

Map ๊ตฌ์„ฑ ์š”์†Œ์˜ style ์ž…๋ ฅ์€ MapTypeStyle ์œ ํ˜•์˜ ๊ฐœ์ฒด ๋ฐฐ์—ด์„ ํ—ˆ์šฉํ•˜๋ฉฐ ์ด์ „์— ์‚ฌ์šฉํ•œ ์ ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ™•์‹คํžˆ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์ œ๋ฅผ ๋” ์งง๊ฒŒ ๋งŒ๋“œ์„ธ์š”. ์ด๋Ÿฌํ•œ ์Šคํƒ€์ผ์ด ๋ชจ๋‘ ํ•„์š”ํ•œ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•œ ์˜ค๋ฅ˜๋ฅผ ๊ตฌ๋ฌธ ๋ถ„์„ํ•˜๊ณ  ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ AGM์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ„๊ทธ๋ฅผ ์กฐ์‚ฌํ•˜๋ ค๋ฉด ๋ณต์ œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๊ฑฐ๋‚˜ ์žฌ์ƒ์‚ฐ์ด ๋ถ€์กฑํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์„ ๋‹ซ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ–ˆ์Šต๋‹ˆ๋‹ค.

์Šคํƒ€์ผ: [] = [
{
"์š”์†Œ ์œ ํ˜•": "๊ธฐํ•˜ํ•™",
"์Šคํƒ€์ผ๋Ÿฌ": [
{
"์ƒ‰์ƒ": "#212121"
}
]
}

๋‚˜๋Š” ์ถ”๊ฐ€ํ–ˆ๋‹ค [] =

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰