ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΡΠΈΠ»Ρ Π² AGM
ΠΌΠ½Π΅ ΡΡΠΎ Π½ΡΠ°Π²ΠΈΠ»ΠΎΡΡ
Π² ΡΠ°ΠΉΠ»Π΅ Π’Π‘
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/
ΠΡΠ±ΠΎΠΉ ΠΎΡΠ²Π΅Ρ
ΠΠ²ΠΎΠ΄ style
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Map ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΌΠ°ΡΡΠΈΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΡΠΈΠΏΠ° MapTypeStyle
, ΠΈ ΠΎΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π΅Π³ΠΎ ΡΠ°Π½ΡΡΠ΅.
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π΄Π΅Π»Π°ΠΉΡΠ΅ Π²Π°ΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΡΠΎΡΠ΅, Π²ΡΠ΅ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ Π½Π΅ Π½ΡΠΆΠ½Ρ. ΠΠ΅Π³ΡΠ΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ΅ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΡ, ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΠΎΡΠΈΠ±ΠΊΡ Π² AGM. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Ρ Π·Π°ΠΊΡΠΎΡ ΡΡΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΈ / ΠΈΠ»ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ.
ΠΡΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ:
ΡΡΠΈΠ»ΠΈ: [] = [
{
"elementType": "Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡ",
"ΡΡΠ°ΠΉΠ»Π΅Ρ": [
{
"ΡΠ²Π΅Ρ": "#212121"
}
]
}
Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» [] =
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ:
ΡΡΠΈΠ»ΠΈ: [] = [
{
"elementType": "Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡ",
"ΡΡΠ°ΠΉΠ»Π΅Ρ": [
{
"ΡΠ²Π΅Ρ": "#212121"
}
]
}
Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» [] =