1. 程式人生 > >基於bootstrap旅遊網站以及高德地圖API的使用

基於bootstrap旅遊網站以及高德地圖API的使用

自己比較喜歡bootstrap框架,所以在很多介面的佈局上主要是採用的這個的框架,因為大四做畢業設計的原因自己寫的框架也會採用的這個框架,關於這個框架其實只要對於HTML和CSS基礎很好的人來說這個框架入手很快,好處就不多說了,說一個自己在答辯的時候遇到一個問題,就是bootstrap會隨著介面自己做適配,然後答辯的時候我把專案投到投影上的時候,然後框架裡面的部分內容都變形了,這個框架可能在縮小的時候比較方便,在放大的超出瀏覽器的大小的時候就會沒辦法做到很好的適配。

圖1


圖一是網站的主頁面,在這個上面也沒有很多花裡胡哨的處理,就是一些基礎的CSS的應用,因為是旅遊網站所以在地圖上會有很多的應用,這裡面更多的是想說是使用高德地圖的使用,我自己先做一個簡單的介紹,http://lbs.amap.com/ 這個是高德地圖的API接口裡面開放了很多的原始碼,只要註冊一下獲取一個KEY的值就可以開發一些很好用的功能點,我今天主要介紹的是在後臺推送上圖片以後如何通過點選圖片再跳轉到具體的地址。

圖二是上傳一個景點名以及具體的座標


圖三最後一張上傳到了前端


圖四點選圖片或者地址可以跳轉到具體的地址


關於座標的抓取http://lbs.amap.com/console/show/picker高德地圖裡面相應的座標的抓取,這樣可以抓到座標,這樣方便在後面的跳轉以後可以準確的跳轉到具體的地址,自己還有一個小的想法就是不通過具體的座標去抓取到那個位置,這樣的方式實現我覺得還是比較簡單的,關於那種做法以後有空試試,自己對於高德地圖的開放原始碼研究也不是很多,純屬自己的一個小想法。