MapConductorमार्कर
मार्कर बनाने के लिए बस एक स्टेट ऑब्जेक्ट बनाकर मैप व्यू पर रखें। रेंडरिंग SDK के आंतरिक रेंडरिंग इंजन द्वारा किया जाता है, जो संख्या के अनुसार स्वचालित रूप से तरीका बदलता है। डिफ़ॉल्ट रूप से 2,000 तक प्रत्येक मैप SDK के मानक मार्कर हैं, और उससे अधिक होने पर रास्टर टाइल हैं। यह मानक मैप व्यू में टाइल रेंडरिंग विकल्प पास करके बदला जा सकता है।
01 · मार्कर की स्थिति
MarkerState एक मार्कर का प्रतिनिधित्व करता है। इसमें स्थिति, आइकन, इवेंट, और मनमाना संबद्ध डेटा होता है, और प्रॉपर्टी को फिर से लिखने पर तुरंत परिलक्षित होता है। प्रदाता-विशिष्ट प्रकार नहीं हैं।
val marker =
MarkerState(
position = GeoPoint.fromLatLong(21.3069, -157.8583),
icon = DefaultMarkerIcon(fillColor = Color.Red, label = "A"),
extra = postOffice,
onClick = { clicked -> viewModel.onMarkerClick(clicked) },
)
// Assigning to a property is all it takes to redraw
marker.position = nextPointlet marker = MarkerState(
position: GeoPoint.fromLatLong(latitude: 21.3069, longitude: -157.8583),
icon: DefaultMarkerIcon(fillColor: .red, label: "A"),
extra: postOffice,
onClick: { clicked in viewModel.onMarkerClick(clicked) }
)
content.markers = markerStates.map { Marker(state: $0) }const marker = createMarkerState({
id: 'post-office-1',
position: createGeoPoint({ latitude: 21.3069, longitude: -157.8583 }),
icon: new ColorDefaultIcon({ fillColor: '#e74c3c', label: 'A' }),
extra: postOffice,
onClick: setSelected,
});
<Markers states={markerStates} />02 · आइकन
डिफ़ॉल्ट पिन पर रंग और लेबल लगाने की विनिर्देश से लेकर छवि, कैनवास, और बुलबुला प्रकार के आइकन तक तैयार हैं। कोई भी आइकन प्रदाताओं के पार एक ही दिखता है।
03 · आंतरिक रेंडरिंग इंजन
मार्कर रेंडरिंग SDK के आंतरिक रेंडरिंग इंजन पर छोड़ दी गई है। जब संख्या कम होती है, तो प्रत्येक मैप SDK के मानक मार्कर का उपयोग किया जाता है, और मूल टैप निर्धारण और एनीमेशन का लाभ उठाया जाता है।
मार्कर 2,000 से अधिक होने पर, इंजन रेंडरिंग तरीका बदलता है। मार्कर समूह को टाइल छवि के रूप में रेंडर करके, एक रास्टर लेयर के रूप में ओवरले करके, मूल SDK में एक-एक जोड़ने और अपडेट करने की लागत समाप्त हो जाती है। ऐप ओर कोई बदलाव नहीं होता है।
नेटिव मार्कर
रास्टर टाइल
// On by default; pass it to the map view to change the threshold
// (the Android parameter is called markerTiling)
val markerTiling =
MarkerTilingOptions.Default.copy(
minMarkerCount = 500, // switch to tile rendering from 500 markers
iconScaleCallback = { _, zoom ->
if (zoom > 10) 0.8 else if (zoom > 5) 0.5 else 0.2
},
)
GoogleMapView(state = mapViewState, markerTiling = markerTiling) { /* markers */ }
// Disable it to keep native markers at any count
val plain = MarkerTilingOptions.Disabledvar content = MapViewContent()
content.markerTilingOptions = MarkerTilingOptions(
minMarkerCount: 500, // switch to tile rendering from 500 markers
iconScaleCallback: { _, zoom in
PostOfficeViewModel.iconScale(zoom: zoom)
}
)
content.markers = markers.map { Marker(state: $0) }const MARKER_TILING_OPTIONS: MarkerTilingOptions = {
...MarkerTilingOptions.Default,
minMarkerCount: 500, // switch to tile rendering from 500 markers
iconScaleCallback: (_state, zoom) => (zoom > 10 ? 0.8 : zoom > 5 ? 0.5 : 0.2),
};
<PostOfficeMapProvider markerTilingOptions={MARKER_TILING_OPTIONS}>
<Markers states={markerStates} />
</PostOfficeMapProvider>04 · एनीमेशन
सरल एनीमेशन मानक रूप से तैयार हैं। निर्माण के समय निर्दिष्ट करें या बाद में animate() को कॉल करें। शुरू और समाप्त हैंडल से प्राप्त किए जा सकते हैं।
// Set one at creation, or call animate() later
MarkerState(position = point, animation = MarkerAnimation.Bounce)
override fun onMarkerClick(clicked: MarkerState) {
clicked.animate(clicked.extra as? MarkerAnimation)
}if let animation = clicked.extra as? MarkerAnimation {
clicked.animate(animation)
}const marker = createMarkerState({
id: 'animated-marker',
position: HONOLULU,
animation,
onClick: state => state.animate(MarkerAnimation.Bounce),
});एनिमेशन के दौरान मार्कर एक विशेष ओवरले के साथ बनाए जाते हैं, इसलिए ये टाइल रेंडरिंग में बदलने की स्थिति में भी चलते हैं। आवश्यक समय SDK की सेटिंग में बदला जा सकता है।