Как добавить несколько интерактивных маркеров, которые отображают всплывающее изображение при нажатии в Googlemap

#json #swift #google-maps #google-maps-markers #swift4.2

#json #swift #google-карты #google-карты-маркеры #swift4.2

Вопрос:

Я добавил MapView с помощью @IBOutlet и расширения GMSMapViewDelegate{}

приведенный ниже код способен анализировать возвращенный результат json. Код получит URL-адрес изображения и Latlon.

Проблемы:

  1. маркеры добавляются в googlemap, но карта не показывает их в центре, поэтому вы не прокручиваете, чтобы найти маркеры
  2. Как реализовать интерактивный маркер, при щелчке он будет извлекать базу изображений по URL-адресу изображения
 import UIKit
import Foundation
import GoogleMaps
import GooglePlaces


class ViewController: UIViewController {

    @IBOutlet weak var mapView: GMSMapView!
      
    override func viewDidLoad() {
        super.viewDidLoad()
       
        mapView.delegate = self

        getJsonMapData()
    }
    
    func getJsonMapData(){
        
        guard let mapUrl = URL(string: "https://xxxxxxxx/traffic-images") else { return }
        
        URLSession.shared.dataTask(with: mapUrl) { (data, response, error) in
        
            guard error == nil else { return}
            guard let data = data else { return}
            
            let dataString = String(data: data, encoding:.utf8)
            
            do {
                
                    let jsonDecoder = JSONDecoder()
                    jsonDecoder.dateDecodingStrategy = .iso8601
                    let LocationArrDict = try jsonDecoder.decode(Location.self, from: data)
                
                    let items = LocationArrDict.items
                
                                  
                        for item in items {
                  
                            let cams = item.cameras
                            
                            for cam in cams {
                        
                             let strimgUrl = cam.image
                             let lat: Double =  Double(cam.location.latitude)
                             let lon: Double = Double(cam.location.longitude)
            
                             let  GpsMarker = GMSMarker()
                             GpsMarker.position = CLLocationCoordinate2D(latitude: lat, longitude: lon)

                             //GpsMarket.iconView = UIImageView(image: ??? how to add the image url  ??)
                              
                              DispatchQueue.main.async {
                            
                              GpsMarker.map = self.mapView
                              self.view.addSubview(self.mapView)
                              
                            }
                        }
                    }
            } catch {
                print(error)
            }
            
        }.resume()
    }
}
        
extension ViewController:GMSMapViewDelegate{}



//----------------------- return Json String:

{
   "items":[
      {
         "timestamp":"2020-12-05T08:45:43 08:00",
         "cameras":[
            {
               "timestamp":"2020-11-05T08:42:43 08:00",
               "image":"https://xxxxxxxxx/traffic-images/2020/12/2ab06cd8-4dcf-434c-b758-804e690e57db.jpg",
               "location":{
                  "latitude":1.29531332,
                  "longitude":103.871146
               },
               "camera_id":"1001",
               "image_metadata":{
                  "height":240,
                  "width":320,
                  "md5":"c9686a013f3a2ed4af61260811661fc4"
               }
            },
            {
               "timestamp":"2020-11-05T08:42:43 08:00",
               "image":"https://xxxxxxxxxx/traffic-images/2020/12/9f6d307e-8b05-414d-b27d-bf1414aa2cc7.jpg",
               "location":{
                  "latitude":1.319541067,
                  "longitude":103.8785627
               },
               "camera_id":"1002",
               "image_metadata":{
                  "height":240,
                  "width":320,
                  "md5":"78060d8fbdd241adf43a2f1ae5d252b1"
               }
             },

                    ........

            {
               "timestamp":"2020-12-05T08:42:43 08:00",
               "image":"https://xxxxxx/traffic-images/2020/12/98f64fe6-5985-4a8a-852f-0be24b0a6271.jpg",
               "location":{
                  "latitude":1.41270056,
                  "longitude":103.80642712
                },
                 "camera_id":"9706",
                 "image_metadata":{
                  "height":360,
                  "width":640,
                  "md5":"f63d54176620fa1d9896fa438b3cc753"
                }
            }
          ]
        }
  
       ],
  
      "api_info":{
         "status":"healthy"
       }
}