建立 GMap 類別
<?php
date_default_timezone_set('Asia/Taipei');
// 用來查詢地址的經、緯度
class GMap {
function getPageData($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_0);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect: '));
curl_setopt($ch, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_NOBODY, false);
curl_setopt($ch, CURLOPT_FILETIME, true);
curl_setopt($ch, CURLOPT_REFERER, $url);
curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 4);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)");
$result['data'] = curl_exec($ch);
curl_close($ch);
return $result;
}
// 初始化 apikey 金鑰
function __construct() {
$this->apikey = '向 Google map 申請 apikey';
}
// 從 google map 取得地址經緯度
public function getLngLat($addr='',$sDebug='') {
$apikey = $this->apikey;
$url = "https://maps.googleapis.com/maps/api/geocode/json?address=$addr&key=$apikey";
$geocode = $this->getPageData($url);
if($sDebug=='debug')
var_dump($geocode);
if(isset($geocode['data'])) {
if(!$geocode["data"])
// 當 Google map 解析不了時，回應 經/緯度值都是 -1 的虛擬經緯度
$geocode = '{"results":[{"geometry":{"location":{"lat":-1,"lng":-1}}}]}';
else
$geocode = $geocode['data'];
} else
// 當 Google map 解析不了時，回應 經/緯度值都是 -1 的虛擬經緯度
$geocode = '{"results":[{"geometry":{"location":{"lat":-1,"lng":-1}}}]}';
$output = json_decode($geocode);
$latitude = $output->results[0]->geometry->location->lat;
$longitude = $output->results[0]->geometry->location->lng;
return array('lat'=>$latitude,'lng'=>$longitude);
}
}
?>
getroute.php，用來依次計算起點至每個目的地的距離，取最近的地址做為下個停靠點，並再以這地址做為下次計算的起點
<?php
// 切換至 https
if (empty($_SERVER['HTTPS']) || $_SERVER['HTTPS'] === "off")
{
$location = 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
header('HTTP/1.1 301 Moved Permanently');
header('Location: ' . $location);
exit;
}
include('gmap.php');
class MyDest {
public $addr;
public $len = 0;
public $lng = -1;
public $lat = -1;
function __construct($aa) {
$this->addr = $aa;
}
}
if(isset($_GET['lat'])) {
// 接收到起點 經/緯 度
// $sLat = 22.612058525444247; // 測試用
// $sLng = 120.3142669919977; // 測試用
$sLat = $_GET['lat'];
$sLng = $_GET['lng'];
$aDest = array(); // 存放上傳的目的地
$aSort = array(); // 排序後的目的地
$gmap = new GMap();
if(isset($_GET['dest1'])) {
$obj = new MyDest($_GET['dest1']);
$fLngLat = $gmap->getLngLat($obj->addr); // 上車地點經緯度
$obj->lat = $fLngLat["lat"]; // 緯度
$obj->lng = $fLngLat["lng"]; // 經度
array_push($aDest, $obj);
}
if(isset($_GET['dest2'])) {
$obj = new MyDest($_GET['dest2']);
$fLngLat = $gmap->getLngLat($obj->addr); // 上車地點經緯度
$obj->lat = $fLngLat["lat"]; // 緯度
$obj->lng = $fLngLat["lng"]; // 經度
array_push($aDest, $obj);
}
if(isset($_GET['dest3'])) {
$obj = new MyDest($_GET['dest3']);
$fLngLat = $gmap->getLngLat($obj->addr); // 上車地點經緯度
$obj->lat = $fLngLat["lat"]; // 緯度
$obj->lng = $fLngLat["lng"]; // 經度
array_push($aDest, $obj);
}
if(isset($_GET['dest4'])) {
$obj = new MyDest($_GET['dest4']);
$fLngLat = $gmap->getLngLat($obj->addr); // 上車地點經緯度
$obj->lat = $fLngLat["lat"]; // 緯度
$obj->lng = $fLngLat["lng"]; // 經度
array_push($aDest, $obj);
}
if(isset($_GET['dest5'])) {
$obj = new MyDest($_GET['dest5']);
$fLngLat = $gmap->getLngLat($obj->addr); // 上車地點經緯度
$obj->lat = $fLngLat["lat"]; // 緯度
$obj->lng = $fLngLat["lng"]; // 經度
array_push($aDest, $obj);
}
while(count($aDest)>0) {
foreach($aDest as &$val) { // 注意：$val 前面有 &
// 計算【各目的地】距離【起點】的長度
$url = "https://maps.googleapis.com/maps/api/directions/json?origin=$sLat,$sLng&destination=".urlencode($val->addr)."&key=$apiKey";
// 目的地 destination 參數也可以是經緯度
$url = "https://maps.googleapis.com/maps/api/directions/json?origin=$sLat,$sLng&destination=".urlencode($val->lat).",".urlencode($val->lng)."&key=$apiKey";
// 若希望路線避開上高速公路, 則可加 avoid=highways 參數
$url = "https://maps.googleapis.com/maps/api/directions/json?origin=$sLat,$sLng&destination=".urlencode($val->addr)."&avoid=highways&key=$apiKey";
// 此外, 還可避開 ----
// tolls：避開收費路段
// highways：避開高速公路
// ferries：避開渡輪
// indoor：避開室內路線（主要用於步行路線）
// 初始化 cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
curl_close($ch);
// 解析 json 響應
$data = json_decode($response, true);
if ($data['status']=='OK') {
$val->len = $data['routes'][0]['legs'][0]['distance']['value'];
} else {
$val->len = -1;
}
unset($val);
}
// 使用 usort 函數排序陣列，根據 $a 屬性值從小到大排序
usort($aDest, function($a, $b) {
return $a->len <=> $b->len;
});
// 排序後的第一個物件就是 距離最短的地址
$minObj = $aDest[0];
// print_r($aDest);
array_push($aSort, ['addr' => ($minObj->addr)]);
// 這個地址做為起點
$sLat = $minObj->lat;
$sLng = $minObj->lng;
array_splice($aDest, 0, 1);
}
echo json_encode($aSort); // 回傳依距離排序後的停靠點及目的地
}
?>
navi.php，將排好的順序丟給 GoogleMap 導航。
<?php
// 切換至 https
if(empty($_SERVER['HTTPS']) || $_SERVER['HTTPS'] === "off")
{
$location = 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
header('HTTP/1.1 301 Moved Permanently');
header('Location: ' . $location);
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%;">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<br />
<button onclick="startNavigation()" style="font-size:40pt;">巡航</button><br />
<span style="font-size:40pt;">提醒：在 Android Chrome 開啟本網頁</span><br />
<br />
<br />
<script>
function startNavigation() {
var aRoute = [
"高雄市苓雅區四維三路2號",
"高雄市前鎮區中華五路789號",
"高雄市鼓山區濱海二路1號",
"高雄市左營區博愛二路777號",
"高雄市左營區高鐵路107號"
];
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude; // 緯度
var longitude = position.coords.longitude; // 經度
var str = "https://您自己的網址/getroute.php?lat="+latitude+"&lng="+longitude+"&dest1="+aRoute[0]+"&dest2="+aRoute[1]+"&dest3="+aRoute[2]+"&dest4="+aRoute[3]+"&dest5="+aRoute[4];
// alert('str = '+str);
// return;
var destinations = new Array();
$.getJSON(str, function(res) {
// alert("res = "+res);
// 這段是從 client 端向 server 請求查詢
// server 回傳 json 型態的陣列
// 陣列內的元素是 addr
res.forEach(function(element) {
destinations.push(element.addr);
});
var waypoints = destinations.map(function(destination) {
// Google map 規定停靠點以【|】字元分隔
// 將 5 個地點以【|】字元分隔
return encodeURIComponent(destination);
}).join("|");
destination = waypoints.split('|').pop(); // 取得最後【|】右邊的字串做為目的地
waypoints = waypoints.slice(0, waypoints.lastIndexOf('|')); // 取得最後【|】的左邊字串做為停靠點
// 構建導航 URL
var mapsURL = "https://www.google.com/maps/dir/?api=1&origin=" + latitude + "," + longitude + "&destination=" + destination + "&waypoints=" + waypoints + "&travelmode=driving";
// alert(mapsURL);
// return;
// 跳轉到 Google Maps
window.location.href = mapsURL;
});
// return;
}, function(error) {
alert("無法取得地理位置: " + error.message);
}
);
} else {
alert("瀏覽器不支援地理定位功能。");
}
}
</script>
<br />
<br />
</body>
</html>
排序後，程式呼叫 Android 手機上的 Google Map app 進行導航。
第一次執行這個網頁程式時，會詢問是否同意瀏覽器存取你的地理位置，選擇同意且記住您的選擇，之後執行就不會再跳出詢問視窗了。
測試 Google Chrome、Firefox、Microsoft Edge 這幾個主流瀏覽器
Chrome 效果最佳，直接啟動 Google Map，畢竟都是自家的產品；
Edge 雖可呼叫 Google Map，但詢問視窗一直開著，不會自動關閉
Firefox 最差，啟動了 Google Map，但要導航的地址全不見了!!
另一個有趣的發現：
如果只單純導航前往一個地點，Google Map 並不管目的地是否與您的行車方向順向，只要抵達目的地附近，Google Map 就認為任務完成了。ex：出發點是高雄市中山大學，目的地是高雄女中(雄女)，雄女的對面是國軍英雄館，Google 導航只要帶您到國軍英雄館，導航就結束了。
但當設了多個停靠點時，Google Map 就會使命必達，規劃的路線即使繞一圈也會帶您順向抵達雄女。
然後...老人家又好奇了...這個網頁程式在 iPhone 上打開會是什麼結果?
答案是：在 Safari 直接 Deny!! 不給開
2025
相關筆記 ----
