quasar上高德地圖vue-amap組件應(yīng)用攻略:進(jìn)階篇

一、設(shè)置中心點(diǎn)

設(shè)置中心點(diǎn)是通過map類的setCenter(中心點(diǎn)坐標(biāo))廊散、setZoomAndCenter(縮放級別雹有,中心點(diǎn)坐標(biāo))方法實(shí)現(xiàn),一般建議使用setZoomAndCenter帆谍,因為不但使地圖回到中心點(diǎn),同時還原到初始的縮放級別轴咱。

二汛蝙、左鍵事件

使用左鍵事件一般需要兩步:

第一步,啟動左鍵事件偵聽朴肺,一般語法為窖剑,對象.on('click',(e) => {事件處理邏輯})
對象可以為地圖實(shí)例,也可以為點(diǎn)標(biāo)記等戈稿。
左鍵事件的參數(shù)e一般包含了左鍵單擊時所在坐標(biāo)西土,對此就可以做很多后續(xù)處理了。

第二步鞍盗,實(shí)現(xiàn)事件處理邏輯翠储,常規(guī)的就是彈出一個信息窗體,顯示該點(diǎn)的地理信息橡疼。

三、右鍵事件

和左鍵事件類似庐舟,使用右鍵事件一般需要兩步:

第一步欣除,啟動右鍵事件偵聽,一般語法為挪略,對象.on('rightclick',(e) => {事件處理邏輯})

對象可以為地圖實(shí)例历帚,也可以為點(diǎn)標(biāo)記等。

右鍵事件的參數(shù)e一般包含了右鍵單擊時所在坐標(biāo)杠娱,對此就可以做很多后續(xù)處理了挽牢。

第二步,實(shí)現(xiàn)事件處理邏輯摊求,常規(guī)的就是彈出一個信息窗體禽拔,顯示該點(diǎn)的地理信息。

四、點(diǎn)標(biāo)記

點(diǎn)標(biāo)記就是Marker睹栖,關(guān)于Marker可以參見“高德地圖的Marker和MarkerCluster的應(yīng)用場景分析”硫惕,一個地圖實(shí)例中可以放置若干個Marker,每個Marker可以:
1野来、添加click恼除、rightClick事件
2、指定自定義的圖標(biāo)(icon: "/statics/default.png",)曼氛,如果不指定則顯示地圖默認(rèn)的水滴狀藍(lán)色圖標(biāo)
3豁辉、指定疊加順序(zIndex: 3,)數(shù)字越大越接近頂層,對于多個Marker顯示在同一個地理位置而疊加起來的情況舀患,這個參數(shù)就非常有價值了
4徽级、設(shè)置文字提示(點(diǎn)標(biāo)記實(shí)例.setTitle(文字內(nèi)容)),即鼠標(biāo)停留在這個Marker上時會自動顯示出來的文字构舟,鼠標(biāo)離開則該文字消失灰追。
。狗超。弹澎。。努咐。苦蒿。

五、信息窗口

信息窗口一般隨著地圖實(shí)例的創(chuàng)建而創(chuàng)建渗稍,一般有兩種創(chuàng)建方法佩迟,第一種是通過動態(tài)html語句創(chuàng)建,第二種是基于template區(qū)域的html語句塊定義竿屹,這個示例可以參見“quasar上高德地圖vue-amap組件應(yīng)用攻略:基礎(chǔ)篇”中代碼內(nèi)容报强。顯然第二種方式更加靈活。

一個地圖實(shí)例上最多只能有一個信息窗口實(shí)例拱燃,但該窗口可以顯示在任意坐標(biāo)指定的位置秉溉,每次顯示的時候可以動態(tài)修改其中顯示的內(nèi)容。

顯示信息窗口的方法是:信息窗口實(shí)例.open(地圖實(shí)例, 坐標(biāo))

隱藏信息窗口的方法是:信息窗口實(shí)例.close()

六碗誉、更多內(nèi)容

高德地圖提供了非常豐富的開發(fā)資料召嘶,組件vue-amap的開發(fā)實(shí)際上就是在這些資料基礎(chǔ)上的實(shí)現(xiàn),我一般诚保看這三類資料:

1弄跌、地圖JS API V1.0教程,介紹一些基本概念尝苇。
2铛只、地圖JS API V1.0參考手冊埠胖,真正API內(nèi)容,詳細(xì)介紹每個組件的屬性格仲、方法押袍、事件等,其中也包含了一些示例凯肋,值得參考谊惭。
3、地圖JS API V1.0示例中心侮东,提供了很多示例圈盔,通過這些示例可以知道如何編碼實(shí)現(xiàn)相關(guān)功能。

我看的比較多的還是參考手冊悄雅。另外驱敲,以上是1.0的資料,其實(shí)很多UI組件在JS API V2.0才支持宽闲,所以這個時候不僅僅我們在加載的時候正確指定版本號众眨,同時要到JS API V2.0的資料庫(類似v1.0版本,2.0版本中也是包含教程容诬、參考手冊娩梨、示例中心)中查找相關(guān)API的詳細(xì)介紹。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末览徒,一起剝皮案震驚了整個濱河市狈定,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌习蓬,老刑警劉巖纽什,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異躲叼,居然都是意外死亡芦缰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門枫慷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來饺藤,“玉大人,你說我怎么就攤上這事流礁。” “怎么了罗丰?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵神帅,是天一觀的道長。 經(jīng)常有香客問我萌抵,道長找御,這世上最難降的妖魔是什么元镀? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮霎桅,結(jié)果婚禮上栖疑,老公的妹妹穿的比我還像新娘。我一直安慰自己滔驶,他們只是感情好遇革,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著揭糕,像睡著了一般萝快。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上著角,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天揪漩,我揣著相機(jī)與錄音,去河邊找鬼吏口。 笑死奄容,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的产徊。 我是一名探鬼主播昂勒,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼囚痴!你這毒婦竟也來了叁怪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤深滚,失蹤者是張志新(化名)和其女友劉穎奕谭,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痴荐,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡血柳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了生兆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片难捌。...
    茶點(diǎn)故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鸦难,靈堂內(nèi)的尸體忽然破棺而出根吁,到底是詐尸還是另有隱情,我是刑警寧澤合蔽,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布击敌,位于F島的核電站,受9級特大地震影響拴事,放射性物質(zhì)發(fā)生泄漏沃斤。R本人自食惡果不足惜圣蝎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望衡瓶。 院中可真熱鬧徘公,春花似錦、人聲如沸哮针。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽诚撵。三九已至缭裆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間寿烟,已是汗流浹背澈驼。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留筛武,地道東北人缝其。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像徘六,于是被迫代替她去往敵國和親内边。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容