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