這個項目有一個功能,可以讓用戶在Google Map上畫圖,並且保存在Database上面,下一次進入這個畫面時,就會把圖直接畫出來。
目前想到的方法是這樣:
用戶畫好圖以後將座標以String的方式保存到database上面,然後下一次進入畫面的時候,從DB中取出來,通過對String的操作還原成可以使用的數值。
Database這邊我用TEXT保存了這個座標資料。
相關資料:GoogleMap畫圖以及獲取座標方法
操作過程(PHP+JavaScript+JQuery操作)
1、PHP從Database中取出數據資料,塞在HTML中,通過JQuery取出該值。
1 |
<input type="hidden" id="farm_area" name="farm_area" value="<?=isset($farm_area) ? $farm_area : ''?>"> |
1 |
farmArea = $('#farm_area').val(); |
此時farmArea的值為:
1 |
"(23.031083104715336, 120.18836975097656),(22.951438332269273, 120.19729614257812),(22.941953684522474, 120.28518676757812),(22.986209684312335, 120.24742126464844),(22.994427060337202, 120.36209106445312),(23.04182522949167, 120.27626037597656),(23.00959628673143, 120.2288818359375)" |
2、將farmArea這個String分解成array
JavaScript對於String有提供replace()這個方法,通過正則表達式來對String操作。
下面的操作分別是,去掉符號「\」、「(」、「/ 和1個空格」。
接著使用split()方法,根據「,」來將String分割放入Array中。
1 2 3 4 5 |
farmArea = farmArea.replace(/\(/g,'') .replace(/\)/g,'') .replace(/ ,/g,''); var farmCoordinateArray = farmArea.split(','); |
這時候farmCoordinateArray就是一個帶著data的array了,只不過經緯度兩個值是被拆開來的。
1 |
["23.031083104715336", " 120.18836975097656", "22.951438332269273", " 120.19729614257812", "22.941953684522474", " 120.28518676757812", "22.986209684312335", " 120.24742126464844", "22.994427060337202", " 120.36209106445312", "23.04182522949167", " 120.27626037597656", "23.00959628673143", " 120.2288818359375"] |
細心的人會發現,這一串array中,偶數位的座標前面都會多一個空格,這是獲取座標時就會產生的,所以使用的時候還要去掉空格。
3、使用這個座標Array
Google Map有一個方法是來生成座標物件的:
他需要分別給如Latitude和longitude,所以我們準備了一個for loop方法,按照奇數丟給Lat,偶數丟給Lng就完成了。
1 |
var googleCoordinate = new google.maps.LatLng(myLat, myLng); |
1 2 3 4 5 6 7 8 |
for(i = 0 ; i < farmCoordinateArray.length ; i+=2){ var coordinate1 = farmCoordinateArray[i]; var coordinate2 = farmCoordinateArray[i+1]; coordinate2 = coordinate2.replace(/ /,''); var googleCoordinate = new google.maps.LatLng(coordinate1, coordinate2); googleFarmArea.push(googleCoordinate); } |