1. 程式人生 > >高德地圖自定義annotation圖示

高德地圖自定義annotation圖示

在寫lbs相關的app時,肯定會在地圖上標記一些座標點,有時候也需要根據需求來改變標記的外觀,這篇文章就是記錄了我使用高德地圖sdk的新增自定義樣式點標記時遇到的問題以及解決方法。我使用的開發語言是swift。

我的需求是要在一個地圖頁面上動態標記從網路獲取的點,並且動態生成點標記的樣式。簡單的說就是在地圖上戳的點的圖示是我從網路動態獲取的圖示
img
我看了高德開放平臺的教程,無論是新增自定義樣式點標記還是新增自定義AnnotationView都沒有辦法滿足我的需求,因為這兩種辦法都需要提前匯入圖片,也就是提前把圖片放入Assets資料夾裡。
高德開放平臺的教程:
新增自定義樣式點標記


新增自定義AnnotationView
於是乎我是這樣解決的:
先定義幾個全域性陣列用於存放我所需要的從網路獲取的點標記外觀樣式等資訊,你也可以使用字典等其他資料型別,為了方便我使用普通一維陣列。然後我發現:每次呼叫標註代理方法的時候,這些全域性陣列的最後一個元素就是我所需要的資料!!不信你可以在代理方法裡列印一下 。友情提示:陣列的最後一個元素的獲取方法是 .last。
程式碼大概如下:

import UIKit
import Alamofire
import SwiftyJSON
import SVProgressHUD

class AnnotationViewController: UIViewController,UINavigationControllerDelegate{
    ///
高德地圖view
var mapView = MAMapView() /// 主storyboard let storyBoard = UIStoryboard(name: "Main", bundle: nil) /// 點標記座標陣列 var annotationLocations = [CLLocation]() /// 點標記名稱陣列 var annotationNames = [String]() /// 點標記圖示url var logoURLs = [NSURL]() /// 點標記圖示 var logos = [UIImage]() override
func viewDidLoad() { super.viewDidLoad() /// 初始化地圖view,這個方法的程式碼實現在這篇文章裡已省略!需自行新增。 initMapView() /// 初始化點標記view initAnnotationView() } // MARK: - 初始化點標記view func initAnnotationView(){ /// 一定要記得這一步,否則無法正常生效 mapView.delegate = self /// 進行網路請求,這裡以json為例 Alamofire.request(.GET, requestURL, parameters: parameters) .responseJSON{ response in /// 解析資料 var responseData = JSON(data: response.data!) var datas = responseData["data"] /// 遍歷資料 for i in 0..<(datas.count){ /// 獲取圖示url並將圖示url追加到logoURLs陣列 let logoURLString = datas[i]["logoUrl"].stringValue let logoURL = NSURL(string: logoURLString) self.logoURLs.append(logoURL!) /// 獲取圖示並將圖示追加到logos陣列 let logoData = NSData(contentsOf: logoURL as! URL) let logo = UIImage(data: logoData as! Data) self.logos.append(logo!) /// 戳點 let annotationPoint = MAPointAnnotation() /// 新增點標記的座標和標題 annotationPoint.coordinate = self.annotationLocations[i].coordinate annotationPoint.title = self.annotationNames[i] self.mapView.addAnnotation(annotationPoint) } } } } // MARK: - MAMapViewDelegate代理方法 extension BWExpressViewController: MAMapViewDelegate{ // MARK: - 標註代理方法 func mapView(_ mapView: MAMapView!, viewFor annotation: MAAnnotation!) -> MAAnnotationView! { if annotation.isKind(of: MAPointAnnotation.self){ let annotationIdentifier = "locationIentifier" var poiAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationIdentifier) as? MAPinAnnotationView if poiAnnotationView == nil{ poiAnnotationView = MAPinAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier) } /// logos最後一個元素就是每次戳點所對應的圖示 poiAnnotationView!.image = logos.last poiAnnotationView!.animatesDrop = false poiAnnotationView!.canShowCallout = true return poiAnnotationView } return nil } }

後來仔細想想也是,每次呼叫代理方法的時候,就會往陣列追加一下然後馬上戳點,那麼陣列最新一個元素理所當然是該點的屬性啦~

相關推薦

地圖定義annotation圖示

在寫lbs相關的app時,肯定會在地圖上標記一些座標點,有時候也需要根據需求來改變標記的外觀,這篇文章就是記錄了我使用高德地圖sdk的新增自定義樣式點標記時遇到的問題以及解決方法。我使用的開發語言是swift。 我的需求是要在一個地圖頁面上動態標記從網

地圖 定義點標記 圖示大小

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

地圖---定義飄窗

第一步繼承類MainActivity extends Activity implements OnInfoWindowClickListener,InfoWindowAdapter //給定位的mark新增infoWindow aMap.setOnInfoWindowClickList

地圖定義 marker 佈局里加載網路圖片不顯示的問題

服務端返回一組 marker 陣列,for 迴圈裡新增自定義佈局 marker到地圖上 要注意兩個原因不顯示 marker 1,要在圖片載入完後再把 佈局view新增到 marker 上 2,markerOption必須是 for 迴圈裡的變數,不能是全域性變數,不然

Android 地圖定義地圖覆蓋物(Marker)

先上效果圖,攝像頭和攝像頭上的預警事件紅點就是一個自定義佈局作為地圖的marker的圖示。                camera_red.png (素材圖) 官方提供的API參考手冊:http://

地圖定義Marker點選時出現的InfoWindow

1.自定義InfoWindowAdapter: package com.onetoo.www.onetoo.abapter.home; import android.content.Context;

Vue地圖定義覆蓋物使用例項-content的使用

本例使用content實現在高德地圖上自定義覆蓋物,即自定義marker。先看如下效果: 標題 在地圖上顯示三種顏色的marker:綠色,紫色,橙色。當點選其中的一個marker時,該Marker顏色變為藍色,size變大,並旋轉45度。再次點選其他marker時,之前

AMap地圖定義指標,定位mapview新方法!

最近公司需要做範圍內打卡的功能,所以研究了下高德地圖的SDK,首先註冊申請key就不多講了,百度有很詳細的資料,下面主要記錄下實現方法。demo地址在最下方:下載後自行更新cocoapod檔案下載依

地圖定義路網

思路:繪製折線顯示路網資訊 前提:已知線段起終點座標及路況狀態(一般通過顏色區分) 步驟: 1、按指導文件配置,顯示地圖(這裡就不講了) 2、監聽地圖狀態變化,獲取當前地圖狀態(主要是獲取縮放級別,變更線段粗細) aMap.setOnCameraC

地圖定義POI的樣式

 前段時間在開發一個地圖相關的軟體,本來要實現Poi搜尋完成後的高亮,類似高德官方的地圖,如下圖: 用高德的API一直不得要領,沒辦法,只好自己重新按marker的方法來實現,然後就沒有用高德API提供的POI搜尋類。下面貼出部分程式碼, /** * 目的地非同步搜尋

地圖定義infowindow之點選不彈出訊息框

今天在開發過程中,突然產品來了一句地圖上面有要回到以前,再點選Marker的時候需要顯示一個自定義的訊息框,這時候,原本帶著非常陽光的心情上班,結果天氣預報也有不準的時候,我頓時有想搞他的心都有了(之前是他說要去掉這個訊息框),但是作為碼農的我們,當然沒有這個能

有關地圖定義mark載入網路圖片-心-乾貨,

最近專案需要用到高德地圖,因為涉及到雲圖,整合的時候發現不少坑。這些坑基本上網上都有教程,或類似已經踩過的坑。 但是高德自定義圖示的時候只提供了。。 今天就來說說,一些度娘比較少的給mark載入網路上的圖片。 思路是這樣的: 首先,載入網路嘛,肯定要考慮用高德提供的 fro

地圖定義點聚合樣式Android

寫了Android高德地圖的點聚合功能 不廢話:直接上程式碼 private ClusterOverlay mClusterOverlay; private int clusterRadius = 100; private void dianjuheP

地圖定義樣式

首先,我們在高德地圖sdk中下載自定義地圖,並在build.gradle中引用。將下載的.data檔案放入assets資料夾下。關鍵來了,如何讀取自定義地圖。private void setMapCustomStyleFile(Context context) { S

Android實現地圖定義樣式

放置Android工程下的assets資料夾,在assets資料夾裡面建立了一個styleMap子資料夾。將裡面的檔案寫到sd卡中。 寫出檔案程式碼: try { // 先獲取系統

地圖適應(setFitView)部分Marker顯示

高德地圖API提供了一個自適應的方法——setFitView,效果就是可以自動適應顯示你想顯示的範圍區域,舉個簡單的應用場景,比如一個點在海南,另一個點在東北,那麼使用了這個方法,顯示的將是從南到北的整個中國區域,而如果是一個點在天安門,另一個在故宮,使用這個方法後,那麼顯示

vue百度地圖定義標記圖示

由於vue的路由機制,導致通過傳參寫的相對位置的圖片資源時並不能被正常獲取,需要通過import的方式匯入資源 import iconCar from '../assets/images/devi

地圖新增定義圖示

1.新增自定義圖示 aMap.addMarker(new MarkerOptions() .draggable(true) .title(jsonObject.getString("functionDetail")

關於地圖怎麽搜索定義地理位(自己定義圖標位置)

js html 因為我在前端定義圖標位置(經緯度),現在想通過高德地圖AMap.Autocomplete自動提示:提示我自定義(地理圖標)高德地圖有說明,這個附錄要怎麽去調用?關於高德地圖怎麽搜索自定義地理位(自己定義圖標位置)

(三)地圖定義縮放及縮放動畫效果

這一節主要實現的功能是地圖的自定義縮放及縮放的動畫效果,還是直接放上程式碼更直觀些,主要部位裡面基本有註解 還是老樣子,首先是新建activity_zoom_animate.xml佈局檔案 <?xml version="1.0" encoding="utf-8"?> <