JS-Google Map API 研究一下

Google Map API的手冊寫的很全,比如看這個Simple Map的例子,很快就能顯示一張地圖。


而最近因為參加一個Open Data的比賽,項目需要用到一些Google map額外的功能,比如畫圖,我打算邊研究邊做個紀錄。

列一下功能表

基本:

  1. 顯示地圖,定位到某一個點,縮放至合適的大小。
  2. 可以在地圖上畫出一個範圍,我稱作園地,這個園地需要有個顏色。
  3. 將這個園地,用座標記錄下來。
  4. 重新顯示地圖的時候,可以將畫過的園地顯示在正確的位置上。
  5. 導入一個帶圖的KML資料,顯示在地圖上。

加強部分:

  1. 提供搜索框,可以輸入地址來定位。

基本功能實現

1、顯示地圖、定位地圖以及縮放

參考Google Map Simple Map

通過調整cengter座標可以將地圖定位,而Zoom則是放大程度,越大拉的越進。

2 & 3、畫圖以及紀錄座標

參考Google Map Drawing Tools

畫圖工具除了Google Map意外還需要引用庫drawing

<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing“></script>

Google Map API

實現代碼:

其中DrawingManager就是用來顯示出畫圖工具的。

DrawingModes中有很多可選參數,比如畫直線、圓圈、放進Marker的功能。


獲得座標:

請參考Google Map API Drawing Manager中 DrawingManager class  Events的部分。

google map 畫圖獲得座標

通過addListener可以在用戶畫好圖的時候取得座標array。

獲得座標的方式不太一樣,比如Rectangle是調用.getBunds();


給園地上色:

通過Listener,給園地設定個顏色:

google map 畫圖上色

4、根據已保存的座標顯示出園地

參考Google Map Simple polygon

Google Map 顯示座標圖

事先準備好座標,呈現地圖的時候就把polygon畫上去。


5、導入帶KML圖的資料

KML資料喂給GoogleMap。

這裏url要注意的是,如果少了http://會認不出來,如果kml資料外網訪問不了(比如放在自己的筆記本上,也沒對外開放訪問),都會無法正常顯示。

google map 加入KML資料

上面就是我需要的效果,讓使用者可以畫出一塊園地,然後丟上kml淹水潛勢圖,很清楚的可以知道園地有多少範圍在不同的降雨量下會淹水。

加強功能實現

1、通過輸入地址來定位地圖

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *