In this page

Custom Location View Style

这篇文档目前尚未提供译文,将以原文展示。

This example shows how to customize the location view style for NGLMapView.

  1. Move the map camera to the given location after the map is loaded

  2. Update the map location mode by use setUserTrackingMode method

For all code examples, refer to Maps Code Examples

LocationStyleViewController view source

1import UIKit
2import Nbmap
3enum LocationType {
4    case HidePuckView
5    case UpdateToFollow
6    case UpdateToFollowWithHeading
7    case UpdateToFollowWithCourse
8    case GetUserLocation
9}
10class LocationStyleViewController: UIViewController {
11    var nbMapView: NGLMapView! {
12        didSet {
13            oldValue?.removeFromSuperview()
14            if let mapView = nbMapView {
15                view.insertSubview(mapView, at: 0)
16            }
17        }
18    }
19    
20    var button: UIButton!
21    
22    let typeList = [
23        LocationType.HidePuckView,
24        LocationType.UpdateToFollow,
25        LocationType.UpdateToFollowWithCourse,
26        LocationType.UpdateToFollowWithHeading,
27        LocationType.GetUserLocation
28    ]
29    
30    override func viewDidLoad() {
31        super.viewDidLoad()
32        nbMapView = NGLMapView(frame:self.view.bounds)
33        nbMapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
34        nbMapView.delegate = self
35        
36        button = UIButton(type: .system)
37        button.setTitle("Settings", for: .normal)
38        button.addTarget(self, action: #selector(showSetings), for: .touchUpInside)
39        button.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
40        navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
41    }
42    
43    @objc func showSetings() {
44        let tableViewController = UITableViewController(style: .plain)
45        tableViewController.tableView.delegate = self
46        tableViewController.tableView.dataSource = self
47        tableViewController.title = "Locations Settings"
48        self.present(tableViewController, animated: true)
49    }
50    
51    func performeSettings(tyle: LocationType) {
52        switch tyle {
53        case LocationType.UpdateToFollow:
54            nbMapView.setUserTrackingMode(.follow,animated: true,completionHandler: nil)
55            break
56        case LocationType.UpdateToFollowWithCourse:
57            nbMapView.setUserTrackingMode(.followWithCourse,animated: true,completionHandler: nil)
58            break
59        case LocationType.UpdateToFollowWithHeading:
60            nbMapView.setUserTrackingMode(.followWithHeading,animated: true,completionHandler: nil)
61            break
62        case LocationType.HidePuckView:
63            nbMapView.setUserTrackingMode(.none,animated: true,completionHandler: nil)
64            break
65        case LocationType.GetUserLocation:
66            if let userLocation = nbMapView.userLocation {
67                let location = userLocation.location
68                let isUpdating = userLocation.isUpdating
69                let title = userLocation.title
70                let subtitle = userLocation.subtitle ?? ""
71                print("location:" + location!.description)
72                print("isUpdating:" + String(isUpdating))
73                print("title:" + title)
74                print("subtitle:" + subtitle)
75                if let heading = userLocation.heading {
76                    print(heading.description)
77                }
78            }
79            break
80        }
81       
82    }
83}
84extension LocationStyleViewController: NGLMapViewDelegate {
85    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
86        
87        let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.94798778, 77.57375084),
88                                                                      acrossDistance:10000,
89                                                                               pitch:0,
90                                                                             heading:0)
91       // This method only works after the map has finished loading the style 
92        nbMapView.fly(to: camera)
93    
94    }
95    
96    /**
97     Tells the user that the map view will begin tracking the user's location.
98     This method is called when the value of the `showsUserLocation` property
99     changes to `YES`.
100     @param mapView The map view that is tracking the user's location.
101     */
102    func mapViewWillStartLocatingUser(_ mapView: NGLMapView) {
103       
104    }
105    
106    /**
107     Tells the user that the map view has stopped tracking the user's location.
108     This method is called when the value of the `showsUserLocation` property
109     changes to `NO`.
110     @param mapView The map view that is tracking the user's location.
111     */
112    func mapViewDidStopLocatingUser(_ mapView: NGLMapView) {
113       
114    }
115    
116    
117    /**
118     Asks the user styling options for each default user location annotation view.
119     
120     This method is called many times during gesturing, so you should avoid performing
121     complex or performance-intensive tasks in your implementation.
122     
123     @param mapView The map view that is tracking the user's location.
124     */
125    func mapView(styleForDefaultUserLocationAnnotationView mapView: NGLMapView) -> NGLUserLocationAnnotationViewStyle {
126        let locationStyle =  NGLUserLocationAnnotationViewStyle()
127        /**
128         The fill color for the puck view.
129         */
130        locationStyle.puckFillColor = UIColor.blue
131        /**
132         The shadow color for the puck view.
133         */
134        locationStyle.puckShadowColor = UIColor.red
135        /**
136         The shadow opacity for the puck view.
137         Set any value between 0.0 and 1.0.
138         The default value of this property is equal to `0.25`
139         */
140        locationStyle.puckShadowOpacity = 0.25
141        /**
142         The fill color for the arrow puck.
143         */
144        locationStyle.puckArrowFillColor = UIColor.black
145        /**
146         The fill color for the puck view.
147         */
148        locationStyle.haloFillColor = UIColor.white
149       
150        if #available(iOS 14, *) {
151            /**
152             The halo fill color for the approximate view.
153             */
154            locationStyle.approximateHaloFillColor = UIColor.white
155            /**
156             The halo border color for the approximate view.
157             */
158            locationStyle.approximateHaloBorderColor = UIColor.white
159            /**
160             The halo border width for the approximate view.
161             The default value of this property is equal to `2.0`
162             */
163            locationStyle.approximateHaloBorderWidth = 2.0
164            /**
165             The halo opacity for the approximate view.
166             Set any value between 0.0 and 1.0
167             The default value of this property is equal to `0.15`
168             */
169            locationStyle.approximateHaloOpacity = 0.15
170        }
171      
172        return locationStyle
173    }
174    
175    /**
176     Tells the user that the location of the user was updated.
177     While the `showsUserLocation` property is set to `YES`, this method is called
178     whenever a new location update is received by the map view. This method is also
179     called if the map view's user tracking mode is set to
180     `NGLUserTrackingModeFollowWithHeading` and the heading changes, or if it is set
181     to `NGLUserTrackingModeFollowWithCourse` and the course changes.
182     This method is not called if the application is currently running in the
183     background. If you want to receive location updates while running in the
184     background, you must use the Core Location framework.
185     private  @param mapView The map view that is tracking the user's location.
186     @param userLocation The location object representing the user's latest
187        location. This property may be `nil`.
188     */
189    func mapView(_ mapView: NGLMapView, didUpdate userLocation: NGLUserLocation?) {
190        
191    }
192  
193    /**
194     Tells the user that an attempt to locate the user's position failed.
195     @param mapView The map view that is tracking the user's location.
196     @param error An error object containing the reason why location tracking
197        failed.
198     */
199    func mapView(_ mapView: NGLMapView, didFailToLocateUserWithError error: Error)  {
200        
201    }
202    
203    
204    /**
205     Tells the user that the map view's user tracking mode has changed.
206     This method is called after the map view asynchronously changes to reflect the
207     new user tracking mode, for example by beginning to zoom or rotate.
208     private  @param mapView The map view that changed its tracking mode.
209     @param mode The new tracking mode.
210     @param animated Whether the change caused an animated effect on the map.
211     */
212    func mapView(_ mapView: NGLMapView, didChange mode: NGLUserTrackingMode, animated: Bool )  {
213        
214    }
215  
216    /**
217     Returns a screen coordinate at which to position the user location annotation.
218     This coordinate is relative to the map view's origin after applying the map view's
219     content insets.
220     When unimplemented, the user location annotation is aligned within the center of
221     the map view with respect to the content insets.
222     This method will override any values set by `NGLMapView.userLocationVerticalAlignment`
223     or `-[NGLMapView setUserLocationVerticalAlignment:animated:]`.
224     @param mapView The map view that is tracking the user's location.
225     
226     Notes: We don't need to set the anchor point for now, so comment out this method first
227     */
228//    func mapViewUserLocationAnchorPoint(_ mapView: NGLMapView ) -> CGPoint  {
229//
230//    }
231    /**
232     Tells the user that the map's location updates accuracy authorization has changed.
233     
234     This method is called after the user changes location accuracy authorization when
235     requesting location permissions or in privacy settings.
236     
237     @param mapView The map view that changed its location accuracy authorization.
238     @param manager The location manager reporting the update.
239     
240     */
241    func mapView(_ apView: NGLMapView, didChangeLocationManagerAuthorization manager: NGLLocationManager)  {
242        
243    }
244    
245    /**
246     Returns a view object to mark the given point annotation object on the map.
247     Implement this method to mark a point annotation with a view object. If you
248     want to mark a particular point annotation with a static image instead, omit
249     this method or have it return `nil` for that annotation, then implement
250     `-mapView:imageForAnnotation:` instead.
251     Annotation views are compatible with UIKit, Core Animation, and other Cocoa
252     Touch frameworks. On the other hand, static annotation images use less memory
253     and draw more quickly than annotation views.
254     The user location annotation view can also be customized via this method. When
255     `annotation` is an instance of `NGLUserLocation` (or equal to the map view's
256     `userLocation` property), return an instance of `NGLUserLocationAnnotationView`
257     (or a subclass thereof).
258     @param mapView The map view that requested the annotation view.
259     @param annotation The object representing the annotation that is about to be
260        displayed.
261     @return The view object to display for the given annotation or `nil` if you
262        want to display an annotation image instead.
263     */
264    func mapView(_ mapView: NGLMapView, viewFor annotation: NGLAnnotation) -> NGLAnnotationView?  {
265        return nil
266    }
267  
268}
269extension LocationStyleViewController: UITableViewDelegate, UITableViewDataSource {
270    
271    func settingsTitlesForRaw(index: Int) -> String {
272        let type = typeList[index]
273        var title: String = ""
274        switch type {
275        case LocationType.HidePuckView :
276                title = "Hide puck view"
277            break
278        case LocationType.UpdateToFollowWithHeading:
279            title = "Update puck view to follow with heading"
280            break
281        case LocationType.UpdateToFollowWithCourse:
282            title = "Update puck view to follow with course"
283            break
284        case LocationType.UpdateToFollow:
285            title = "Update puck view to follow"
286            break
287        case LocationType.GetUserLocation:
288            title = "Get user location"
289            break
290        }
291        return title
292    }
293    //
294     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
295         return typeList.count
296     }
297     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
298         let cell = UITableViewCell(style: .default, reuseIdentifier: nil)
299         cell.textLabel?.text = settingsTitlesForRaw(index: indexPath.row)
300         return cell
301     }
302     func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
303         tableView.isHidden = true
304         let type = typeList[indexPath.row]
305        dismissSettings(type: type)
306     }
307    
308    func dismissSettings(type: LocationType) {
309        dismiss(animated: true)
310        performeSettings(tyle: type)
311    }
312}

The example code is a LocationStyleViewController class that sets up a map view (NGLMapView) and handles various location-related functionalities.

Initializing MapView:

  1. The nbMapView property is initialized as an instance of NGLMapView and added as a subview to the view controller's view.

  2. The autoresizingMask property is set to allow the map view to resize with the view controller's view.

  3. The delegate property is set to self to receive map view delegate callbacks.

Custom User Location Style:

  1. The mapView(styleForDefaultUserLocationAnnotationView:) method is implemented to customize the appearance of the default user location annotation view.

  2. A NGLUserLocationAnnotationViewStyle object is created and configured with various properties to customize the puck, arrow, and halo colors. The method returns the configured NGLUserLocationAnnotationViewStyle object.

Setting User Tracking Mode:

  1. Depending on the selected LocationType, the method calls nbMapView.setUserTrackingMode with the appropriate mode.

  2. The setUserTrackingMode(_:animated:completionHandler:) method is used to set the user tracking mode for the map view.

    1. NGLUserTrackingModeNone The map does not follow the user location.

    2. NGLUserTrackingModeFollow The map follows the user location. This tracking mode falls back to NGLUserTrackingModeNone if the user pans the map view.

    3. NGLUserTrackingModeFollowWithHeading The map follows the user location and rotates when the heading changes.

    4. NGLUserTrackingModeFollowWithCourse The map follows the user location and rotates when the course changes.

没找到你要找的内容?