iT邦幫忙

DAY 11
6

東之宿_網站開發系列 第 11

東之宿_開發日誌-12(Google MAP 距離計算-下)

最後將計算出的距離,轉化為公里,得到想要的結果。


太陽想到將JavaScript取得的經緯度值,傳送到PHP的方法是...POST。

1.一開始的時候,載入Google MAP API V2需要載入的js

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(輸入api v2 key)&sensor=true">"></script>

  1. 設定一個<a>,<a>加入onclick="xxx()",按下這個<a>之後,進入JavaScript的function。

    <li><a href="#" onclick="sendfood()">
        <img src="../img/res.png" data-inline="true" />
        <h2>我附近的餐廳</h2>
        <p></p></a>
    </li>
    

3.JavaScript的內容如下:

function sendfood(){
    if (navigator.geolocation)
    {
        //Get the current position
        navigator.geolocation.getCurrentPosition(function (position)
        {
          var latitude = position.coords.latitude; //取得經緯度數值
          var longitude = position.coords.longitude; //取得經緯度數值
          location.href='xxx.php?lat='+latitude+'&ing='+longitude; //將取得的數值,送到另一個php檔,並將網頁轉向到另一個php檔
        });
    }
    else
    {
        alert("Sorry... your browser does not support the HTML5 GeoLocation API");
    }
    }

4.php檔接收到數值後,取出資料庫內的資料,並加以計算。

$search="SELECT * ,((ACOS(SIN($current_lat * PI() / 180) * SIN(`dest_lat` * PI() / 180) \n"  
                . " + COS($current_lat * PI() / 180) * COS(`dest_lat` * PI() / 180) * COS(($current_ing - `dest_ing`) \n"  
                . " * PI() / 180)) * 180 / PI()) * 60 * 1.1515) AS `distance` \n"  
                . " FROM table  ( `dest_lat` BETWEEN ($current_lat - $bounding_distance) AND ($current_lat + $bounding_distance) \n"  
                . " AND `dest_ing` BETWEEN ($current_ing - $bounding_distance) AND ($current_ing + $bounding_distance)) \n"  
                . " ORDER BY `distance` asc limit 20 \n";  

5.最後將計算出的距離,轉化為公里,得到想要的結果。

下回預告:

版面設計時的痛苦...將向各位大大報告。

2013/10/12 SunAllen

鐵人賽_開發技術組_文章導覽

上一篇
下一篇

2013鐵人賽_文章總覽
個人全系列連結


上一篇
東之宿_開發日誌-11(Google MAP 距離計算-上)
下一篇
東之宿_開發日誌-13(版面設計軌跡-1)
系列文
東之宿_網站開發16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
miggires
iT邦新手 5 級 ‧ 2014-08-11 15:02:47

不好意思!!我最近想寫類似這樣的app,想請問如果要用v3該怎麼寫

我要留言

立即登入留言