一、設(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ì)介紹。