65.9K
CodeProject 正在变化。 阅读更多。
Home

记录当前地理位置并在 Web 上显示的简单应用程序

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.75/5 (37投票s)

2011年6月12日

CPOL

12分钟阅读

viewsIcon

315775

downloadIcon

10429

讨论了一种从移动设备记录当前地理位置并在网页上显示的技术( 附带位置历史记录浏览)。

引言

基于位置的服务(LBS)如今越来越受欢迎。有许多移动应用程序可以检测用户当前的地理位置,提供与该位置相关的信息,并在 Web 中显示位置。本文将讨论如何开发一个类似的应用程序(包括移动和 Web 部分),该应用程序允许用户从移动设备保存其位置,并在网页中显示其当前位置,并提供地图上的位置历史记录浏览功能。我将展示一个所有这些功能协同工作的实时演示!

背景

去年,我开始开发我的个人网站,其中一件事引起了我的兴趣。我在想如何让我的主页与众不同。我被Google Maps for mobile迷住了,并想为什么我不开发类似的东西——一个小型应用程序,可以在我的主页上显示我的当前位置。我开始深入研究这个主题,很快就找到了JSR 179 - J2ME 基于位置的服务。我可以使用任何现有的应用程序来显示我的位置(例如,Google Latitude),但我有兴趣玩我的 GPS 轨迹。我还有一部带有内置 GPS 模块的移动设备(现代智能手机的常见功能),因此开发平台已就绪 :)。

使用的技术

虽然我将在本文中使用J2ME Wireless Toolkit 2.5.2PHPHTMLCSSjQueryMySQL(涉及一点点 :P),但不需要对这些有扎实的技术背景。您可以使用任何技术组合来开发类似的应用程序。

快速概览

让我们快速浏览一下我们将要开发的应用程序。以下是移动应用程序的截图

Functions_640x178_.png

这是 Web 应用程序

Web_640x272_.png

Web 应用程序的 URL:我的当前位置浏览我的 GPS 轨迹历史记录

好了,截图够了。现在我们开始开发我们的应用程序。首先,让我们从移动应用程序开始。

移动应用程序:MapMe

是的,我称之为MapMeMapMe将执行以下任务

  • 在屏幕上打印当前(纬度经度)(图 2)
  • 在地图上显示当前位置(图 3)
  • 保存当前位置(图 4)
  • 连续保存当前位置,即如果您打开此模式,应用程序将在您移动时持续保存您的位置,直到您停止此模式。(图 5)

如果您的手机没有GPS单元,请不要惊慌。稍后我将在本文中讨论如何检测非GPS手机的位置。

好了,开始编码吧!我正在使用NetBeans IDE。让我们在NetBeans中创建一个 J2ME 项目,并添加一个名为MapMeMIDlet类。让我们添加五个Command(*“定位我”*、*“地图我”*、*“保存我”*、*“关于我”*、*“开始”*)来执行操作。(我在这里不讨论 J2ME 相关细节,即CommandMIDlet等是什么)。在getmainForm()方法中,我们根据指定的Criteria初始化LocationProvider

Criteria cr = new Criteria();
cr.setHorizontalAccuracy(Criteria.NO_REQUIREMENT);
cr.setVerticalAccuracy(Criteria.NO_REQUIREMENT);
cr.setCostAllowed(true); cr.setPreferredPowerConsumption(Criteria.POWER_USAGE_HIGH);
this.locationProvider = LocationProvider.getInstance(cr);

现在我们开始在Helper类中编写getLocation()方法。此方法将读取当前的纬度经度海拔并返回它们。这是代码

public static double[] getLocation(LocationProvider lp) throws Exception
{
    double []arr = new double[3];
    if(lp != null)
    {
        switch(lp.getState())
        {
            case LocationProvider.AVAILABLE:
                Location l = lp.getLocation(-1);
                QualifiedCoordinates  c = l.getQualifiedCoordinates();
                if(c != null )
                {
                  double lat = c.getLatitude();
                  double lon = c.getLongitude();
                  double alt = c.getAltitude();
                  String latStr = Double.toString(lat).substring(0,7);
                  String lonStr = Double.toString(lon).substring(0,7);
                  lat = Double.parseDouble(latStr);
                  lon = Double.parseDouble(lonStr);
                  arr[0] = lat;
                  arr[1] = lon;
                  arr[2] = alt;
                }
                else
                {
                    throw new Exception("Co ordinate is null!!");
                }
                break;

            /* Other cases are handled here */

            default:
                break;
        }
    }

    return arr;
}

现在,当用户点击*“定位我”*菜单时,我们只需调用getLocation()方法并将数组显示在屏幕上。就是这么简单。现在,我们想在地图上显示位置。我正在使用MidMaps:Google Maps Java ME 库。当用户点击*“地图我”*菜单时,我们将MapViewer类设置为当前显示,并将位置数据传递给它,以便它可以渲染地图。

public class MapViewer extends Canvas implements GoogleStaticMapHandler,CommandListener
{
   /*Other fields here*/
   private String apiKey = "Your-GoogleMap(API-v2)-apiKey" ;
   public MapViewer(MIDlet midlet, Displayable mainScreen, double lat, double lon)
    {
        this.lat = lat;
        this.lon = lon;
        this.mainScreen = mainScreen;
        this.midlet = midlet;
        this.addCommand(this.backCommand = 
		new Command("Back", "Back to Search", Command.BACK, 0));
        this.addCommand(this.zoomInCommand = new Command("Zoom in", Command.OK, 1));
    this.addCommand(this.zoomOutCommand = new Command("Zoom out", Command.OK, 2));
        this.setCommandListener(this);
        this.gMaps = new GoogleMaps(this.apiKey);
        map = gMaps.createMap(getWidth(), getHeight(), GoogleStaticMap.FORMAT_PNG);
        map.setHandler(this);
        map.setCenter(new GoogleMapsCoordinates(this.lat, this.lon));
        GoogleMapsMarker redMarker = 
		new GoogleMapsMarker(new GoogleMapsCoordinates(this.lat, this.lon));
        redMarker.setColor(GoogleStaticMap.COLOR_RED);
        redMarker.setSize(GoogleMapsMarker.SIZE_MID);
        map.addMarker(redMarker);
        map.setZoom(15);
        map.update();
    }

    protected void paint(Graphics g)
    {
        map.draw(g, 0, 0, Graphics.TOP | Graphics.LEFT);
    }
    /*Other codes i.e. going back to previous display stay here*/
}

MapMe类中*“地图我”*菜单的命令处理程序中,我们编写以下代码在地图上显示当前位置

public void commandAction(Command command, Displayable displayable)
{
    /*Command Handlers for other commands */
    if(command == this.getcmdMapMe())
    {
        try
        {
            double []arr = Helper.getLocation(this.locationProvider);
            this.getDisplay().setCurrent
		(new MapViewer(this,this.mainForm,arr[0],arr[1]));
        }
        catch(Exception ex)
        {
            this.strLat.setText(ex.getMessage());
        }
    }
}

此时,我们已经具备了检测和显示位置的必要方法。工作完成了一半!接下来就是将它们保存在数据库中。让我们尽快完成它们。首先,让我们在数据库(MySQL)中创建一个表

CREATE TABLE IF NOT EXISTS `current_location` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `lat` double NOT NULL,
  `lon` double NOT NULL,
  `recorded_datetime` datetime NOT NULL,
  PRIMARY KEY (`id`)
);

这是我们保存当前位置的方法

public static boolean saveLocation(String baseUrl, double lat, double lon)
{
    InputStream is =null;
    StringBuffer sb = null;
    HttpConnection http = null;
    boolean result = false;
    try
    {
        baseUrl +="&lat=" + Double.toString(lat) + 
		"&lon=" + Double.toString(lon) + "&time=" + Helper.getNowInDate();
        baseUrl = Helper.EncodeURL(baseUrl);
        http = (HttpConnection) Connector.open(baseUrl);
        http.setRequestMethod(HttpConnection.GET);
        if (http.getResponseCode() == HttpConnection.HTTP_OK)
        {
            sb = new StringBuffer();
            int ch;
            is = http.openInputStream();
            while ((ch = is.read()) != -1)
            {
                sb.append((char) ch);
            }

            result = true;
        }
        else
        {
            result = false;
        }

    }
    catch (Exception ex)
    {
        result = false;
    }
    finally
    {
         /*Close  InputStream & HttpConnection */
    }
}

我们还需要编写一些服务器端代码来处理此请求并将数据保存在数据库中。我将为此目的使用 PHP。这是...

现在,我们几乎完成了一个完整的周期。也就是说,检测并将位置保存在服务器上。但是,我们仍然缺少一个东西。在上述方法中,用户每次都需要点击菜单来保存位置,如果我们能编写一个服务来连续保存位置(例如,每五分钟保存一次位置)怎么办?这也很容易实现,并且使用Location API实现起来非常简单。我们需要实现LocationListener 接口,从而编写两个方法locationUpdated() providerStateChanged。我们将添加两个命令*“开始”*和*“结束”*来满足此目的。每当位置更新时,就会调用locationUpdated() 方法,我们在其中将最新位置保存在数据库中。所以,想想您正在旅行并打开此服务,整个路径都保存在数据库中,然后在 Web 应用程序中,您可以创建很酷的动画,根据时间递增/递减的顺序遍历路径!嗯,我们离那不远了。现在让我们完成此接口的实现

public void locationUpdated(LocationProvider provider, Location location)
{
    if (location != null && location.isValid())
    {
        QualifiedCoordinates qc = location.getQualifiedCoordinates();
        boolean isSaved = Helper.saveLocation(URL, qc.getLatitude(), qc.getLongitude());
        String text = isSaved == true ? "Location Saved " + ++count : "Failed";
        strLat.setText(text);
    }
}

public void providerStateChanged(LocationProvider lp, int i)
{

}

每次保存位置记录时,我们都会更新一个count 变量并打印它。因此,在运行此服务时,我们可以大致了解它存储了多少条记录。现在我们所要做的就是将我们的 MapMe MIDlet 注册到LocationListener。所以我们写

// to start querying GPS data 
locationProvider.setLocationListener(MapMe.this, 10, -1, -1);

// to stop querying GPS data
locationProvider.setLocationListener(null, -1, -1, -1); 

是的,就这么简单。但仍然有一个问题,我们的MapMe 类也实现了CommandListener ,因此可以处理Command (即*“地图我”*点击事件)。因此,当我们点击*“开始”*菜单时,commandaction 事件线程会处理它,只要该线程未完成,就无法触发任何其他按钮事件。但是,一旦用户点击*“开始”*,就会出现一个弹出对话框,请求使用 GPS 数据的权限。但用户无法点击它,因为commandaction 尚未完成。死锁!!是的,就是这样。所以,我们实际上必须做的是在不同的线程中启动和停止监听器

// to start querying GPS data
// to start querying GPS data
new Thread()
{
    public void run()
    {
        locationProvider.setLocationListener
		(MapMe.this, 10, -1, -1); // 10 second interval
    }
}.start();

// to stop querying GPS data
new Thread()
{
    public void run()
    {
        locationProvider.setLocationListener(null, -1, -1, -1);
    }
}.start();

就这样!我们已经完成了开发一个移动应用程序的工作,该应用程序可以将其位置保存在数据库中(不仅一次,而且连续以重复的间隔保存,并且还可以显示地图上的位置)。

Web 应用程序

现在我们的数据库中有大量 GPS 轨迹。让我们开始玩它们吧!我开发了两个简单的应用程序

  • 在我的主页上显示我的当前位置并实现一个计时器,以便每次我更新我的位置时,用户都可以获得实时反馈(图 6)
  • 带导航工具的位置历史记录浏览,即播放、暂停等。(图 7)

自动更新当前位置

如果您浏览我的网站,在我的主页右侧,您会看到一个地图,显示我的确切当前位置。如果您在我主页时保存了一个位置,只有地图会刷新(因为它是在 Ajax 中实现的),您会体验到地图上的突然移动。是不是很酷?是的,而且实现起来非常简单!我们所需要做的就是编写一些代码,这些代码将反复查找服务器上的更新数据,一旦检测到新记录,即当前纬度和经度与之前的不同,就发生了更改,它将更新地图。首先,让我们在服务器端编写getCurrentLocation()方法

function getCurrentLocation()
{
    $strQuery = "select lat, lon, date_format
	(recorded_datetime, '%M %d %Y %h:%i %p') as recorded_time from 
		current_location order by id desc limit 1";
    $resId = executeQuery($strQuery);
    if($resId)
    {
        $data = getRecordsArray($resId);
        return json_encode(array('lat'=>$data["lat"],
		'lon'=>$data["lon"],'time'=>$data["recorded_time"]));
    }
}

我选择了当前位置表的顶行(也是最新的行),并以json编码的形式返回。在网站上,JavaScript 计时器将负责加载地图并定期查询以检测更改。我将使用jQuery库编写这些 JavaScript 行。这是

<script type="text/javascript">
    $(function(){
        var jsonUrl = "Functions/getLatLon.php";
        /* I have put getLatLon.php file under Functions folder of root directory. 
           Change this variable if you put getLatLon.php in some other places. */

        var myLocation,map,marker,lat,lon;
        lat = lon = -1;
        $.ajaxSetup({cache: false});

        $('#mapDiv').oneTime("1s",'timerOneTime',function(i)
        /* This timer runs only once after the page load */
        {
            $.getJSON(jsonUrl,{ action: "getCurrentLocation"}, function(data)
                {
                    lat = data.lat;
                    lon = data.lon;
                    var text = data.lat + ' ,' + data.lon;
                    var latlng = new google.maps.LatLng(lat, lon);
                    var options = {
                      zoom: 15,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      mapTypeControl: false,
                      zoomControl: true,
                      zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.SMALL
                      },
                      streetViewControl: false
                    };
                    map = new google.maps.Map(document.getElementById('mapDiv'), options);
                    var marker = new google.maps.Marker({
                       position: latlng
                    });
                    marker.setMap(map);
                }
            );
        });

        $('#mapDiv').everyTime("5s",'timerEveryTime',function(i)
        /* This timer runs with 5 second interval */
        {
            $.getJSON(jsonUrl,{ action: "getCurrentLocation"}, function(data)
                {
                    if((lat != data.lat || lon != data.lon) && map != null)
                    /* Check for change in GPS trace */
                    {
                        lat = data.lat;
                        lon = data.lon;
                        var latlng = new google.maps.LatLng(lat, lon);
                        if (marker != null)
                            {
                                maker.setMap(null);
                            }
                        map.setCenter(latlng);
                        var marker = new google.maps.Marker({
                           position: latlng
                        });
                        marker.setMap(map);
                    }
                }
            );
        });

      });
</script>

位置历史浏览器

这里的mapDiv 是我加载地图的div 。所以,现在如果您在主页上设置了它,每当有人访问该页面时,他/她都会看到您的确切位置,并且还会收到Location 更改的通知。好的,我们差不多快到本文的结尾了。我将展示的另一件有趣的事情是位置历史浏览器。我们的current_location 表包含按时间顺序保存的所有 GPS 轨迹。因此,我们可以轻松获取任何特定日期的轨迹!想法是允许用户查看任何特定日期的轨迹,并开发一些导航工具来播放它们。首先,让我们完成一个方法getLocationByDate($date),该方法将返回特定日期的 GPS 轨迹的json有效负载

function getLocationByDate($date)
{
    $str = "select lat, lon, date_format(recorded_datetime, " + 
           "'%M %d %Y %h:%i %p') as recorded_date,date_format(recorded_datetime," + 
           " '%h:%i:%s %p') as recorded_time from current_location " + 
           "where STR_TO_DATE(recorded_datetime,'%Y-%m-%d')= '".$date."' order by id";
    $resId = executeQuery($str);
    if($resId)
    {
        $arr = array();
        $i = 0;
        while($data = getRecordsArray($resId))
        {
            $arr[$i] = array('lat'=>$data["lat"], 'lon'=>$data["lon"],
                'date'=>$data["recorded_date"], 'time'=>$data["recorded_time"]);
            $i++;
        }
        return json_encode($arr);
    }
}

现在我们可以用日期调用getLocationByDate($date)并填充地图中的数据。所以,历史浏览器就完成了!等等;我们仍然缺少一些东西。假设我为一天保存了 50 个 GPS 轨迹,显示 50 个点在地图上真的有意义吗?它能为用户增加任何价值吗?对用户来说,这些只是随机的点,他/她怎么知道我那天去了哪里?假设我在早上 7 点在“A”地点,在早上 9 点在“B”地点。这些会显示为两个点,但没有附加时间。以下是我将要做的,以使它们真正对用户有用

  • 地图上的每个点都将是可点击的,也就是说,如果您点击地图上的一个点,地图将平移到该位置,即以该点为中心,并且该点正下方的一个小框将显示时间!(请记住current_location 表中的recorded_datetime 字段)
  • 我们将添加 5 个导航按钮(实际上我们将开发一个 GPS 轨迹播放器!)。它们是
    1. 第一个轨迹:将地图移动到当天的第一个记录的轨迹。
    2. 上一个轨迹:从当前选定的轨迹移动到上一个轨迹,从而使用户能够按时间递减的顺序遍历地图。
    3. 播放/暂停:是的,播放!播放 GPS 轨迹。这将开始播放当前选定轨迹的轨迹。也就是说,地图将自动移动到时间顺序中的下一个点,并一直移动,直到用户点击暂停。为了使过渡平滑,我在每次移动之前都添加了一些延迟。相信我,您会喜欢这个动画。
    4. 下一个轨迹:从当前选定的轨迹移动到下一个轨迹,从而使用户能够按时间递增的顺序遍历地图。
    5. 最后一个轨迹:将地图移动到当天的最后一个记录的轨迹。

现在我们知道该怎么做了!让我们完成代码。jQuery 工具栏按钮完全符合我的用户界面要求。所以,这是代码

<script type="text/javascript">
    $(function(){
            var date = new Date();
            var currentMonth = date.getMonth();
            var currentDate = date.getDate();
            var currentYear = date.getFullYear();
            var baseUrl = "Functions/getLatLon.php";
            var dateFormat = 'yy-mm-dd';
            var map, marker, timerId;
            var markers = [];
            var records = [];
            var index = -1;
            map = new GMap2(document.getElementById('mapDiv'));
            map.addControl(new GMapTypeControl());
            map.addControl(new GLargeMapControl3D());
            var center = new GLatLng(23.7804, 90.404);
            map.setCenter(center, 10);
            $.ajaxSetup({cache: false});
            $( "#datepicker" ).datepicker({
                maxDate : new Date(currentYear, currentMonth, currentDate),
                onSelect: function(dateText, inst){
                    // clear any #message div as well
                    $("#message").hide();
                    // stop if timer is running
                     if (timerId != null){
                        clearInterval(timerId);
                    }

                    if ($( "#play" ).text() == "Pause"){
                        $("#play").click();

                    }
                    // loading new locations.
                    var jsonUrl = baseUrl + "?action=getLocationByDate&date=" + dateText;
                    $.getJSON(jsonUrl, function(json){
                        map.clearOverlays();
                        timerId = null;
                        markers = [];
                        records = [];
                        index = -1;
                        $.each(json, function(key, value){
                          var point = new GLatLng(value.lat, value.lon);
                          marker = new GMarker(point);
                          map.addOverlay(marker);
                          markers[key] = marker;
                          records[key] = value;
                        });
                        if (markers.length == 0){
                            $("#dialog-message").text("No Gps Trace is recorded for "+ 
				dateText +
                            ". Please try again.");
                            $( "#dialog-message" ).dialog('open');
                        }
                        else{
                            $(markers).each(function(i,marker){
                            GEvent.addListener(marker, "click", function(){
                                    displayPointAndUpdateIndex(marker, records[i], i);
                            });
                          });
                        }
                    })
                }});
            $("#dialog-message").dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                buttons: {
                    Ok: function(){
                        $(this).dialog("close");
                    }
                }
            });

            $("#dialog-help").dialog({
                autoOpen: false,
                width: 500,
                modal: true,
                buttons: {
                    Ok: function(){
                        $(this).dialog("close");
                    }
                }
            });

            $( "#datepicker" ).datepicker("option", "dateFormat",dateFormat);
            $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
            $( "#info" ).button({
                text:false,
                lable: "How to play",
                icons: {
                    primary: "ui-icon-lightbulb"
                }
            })
            .click(function(){
                $("#dialog-help").dialog('open');
            })
            $( "#beginning" ).button({
                    text: false,
                    label: "First trace",
                    icons: {
                            primary: "ui-icon-seek-start"
                    }
            })
            .click(function(){
            if (markers.length > 0)
                {
                    index = 0;
                    displayPoint(markers[index], records[index]);
                }
            });
            $( "#previous" ).button({
                    text: false,
                    label: "Previous trace",
                    icons: {
                            //primary: "ui-icon-seek-prev"
                            primary: "ui-icon-triangle-1-w"
                    }
            })
            .click(function(){
                if (markers.length > 0)
                    {
                        if (index <= 0)
                                {
                                    return;
                                }
                                index = index - 1;
                            displayPoint(markers[index], records[index]);
                    }});
            $( "#play" ).button({
                    text: false,
                    icons: {
                            primary: "ui-icon-play"
                    }
            })
            .click(function() {
                    var options;
                    if ( $( this ).text() == "Play" ) {
                            options = {
                                    label: "Pause",
                                    icons: {
                                            primary: "ui-icon-pause"
                                    }
                            };
                            $( this ).button( "option", options );

                            timerId = setInterval(function(){
                                if(markers.length > 0){
                                        $('#forward').click();
                                        if (index == markers.length - 1){
                                            clearInterval(timerId);
                                            timerId = null;
                                            var option = {
                                                label:"Play",
                                                icons: {
                                                    primary: "ui-icon-play"
                                                }
                                            };
                                            $("#play").button( "option", option );
                                        }
                                    }
                                }, 3000);
                            } else {
                            options = {
                                    label: "Play",
                                    icons: {
                                            primary: "ui-icon-play"
                                    }
                            };
                            clearInterval(timerId);
                            timerId = null;
                            $( this ).button( "option", options );
                    }

            });
            $( "#forward" ).button({
                    text: false,
                    label: "Next trace",
                    icons: {
                            // primary: "ui-icon-seek-next"
                            primary: "ui-icon-triangle-1-e"
                    }
            })
            .click(function(){
                if (markers.length > 0)
                    {
                        if (index >= markers.length - 1)
                                {
                                    return;
                                }
                            index++;
                            displayPoint(markers[index], records[index]);

                    }});
            $( "#end" ).button({
                    text: false,
                    label: "Last trace",
                    icons: {
                            primary: "ui-icon-seek-end"
                    }
            })
            .click(function(){
                if (markers.length > 0)
                    {
                        index = markers.length - 1;
                        displayPoint(markers[index], records[index]);
                    }
            });

            function displayPointAndUpdateIndex(marker, record, i){
                index = i;
                displayPoint(marker, record);
            }

            function displayPoint(marker, record){
              map.panTo(marker.getPoint());
              var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
              $("#message").show().css({ top:markerOffset.y, 
			left:markerOffset.x }).html(record.time);
            }
    });
</script>

您可以在http://www.amitdutta.net/gpsTraces.php上尝试。选择 2011 年 5 月 14 日、15 日或 6 月 10 日,因为这些天有很多轨迹。如果点太密集,请放大地图然后开始播放!

尚未实现

  • 位置历史浏览器中,当用户选择一个日期时,地图会填充该天的轨迹。但是,由于默认缩放级别,这些轨迹似乎聚集在一个地方。应在服务器端实现一个算法,根据 GPS 轨迹动态确定缩放级别。
  • “MobileMap”中没有指定服务器 URL 的选项(即保存数据的位置。这是硬编码的,每次我想更改服务器 URL 时,我都需要修改源代码、构建并重新部署。我需要实现某种方法来更改默认服务器 URL。

Using the Code

有三个简单的步骤可以使整个系统正常工作。它们是

  1. 设置服务器端代码和数据库:对于这部分,您需要一个能够运行PHP代码的http 服务器和一个用于保存位置轨迹的MySQL服务器(我在这里不讨论如何集成PHPMySQL)。为了易于理解,我假设您的 HTTP 服务器 URL 是*“http://www.test.com”*。
    • 转到“ServerSide-setup-for-MobileApp”文件夹。在您的数据库(这里是MySQL)中运行“current_location.sql”脚本以创建应用程序的表。打开“config.inc.php”文件并提供数据库设置的必要信息(用户名、密码、主机名)。
    • LocationSaver.phpconfig.inc.php复制到您的http服务器下的一个文件夹中。假设您已将这些文件复制到一个名为“Mobile”的文件夹中。因此,现在*“http://www.test.com/Mobile/LocationSaver.php”*应该可以通过 Internet 公开访问,这意味着我们可以从移动设备与其通信以保存 GPS 轨迹。
  2. 设置 MobileApp
    • “MapMe”是一个Netbeans项目。因此,使用Netbeans打开它将很容易。也可以使用 j2ME wireless toolkit 的控制面板进行编译。
    • 我使用了j2me wireless toolkit 2.5.2,因为它支持Location API。旧版本可能不支持此功能。
    • 如果Netbeans显示引用问题。右键单击项目并调出项目属性窗口。在右下角的“可选包”列表中,选中“基于位置的 API”复选框。
    • “MapMe.java”第 21 行,根据您的设置更改“URL”字段(例如,这里“URL”字段的值将是:“http://www.test.com/Mobile/LocationSaver.php?”)。
    • “MapViewer.java”第 20 行,提供您的 Google 地图 API 密钥。(对于 Google 地图 API 版本 2,在此处获取您的 API 密钥这里
  3. 设置 WebApp
    • 打开“Functions\DBInteractor.php”文件并提供数据库设置的必要信息(用户名、密码、主机名)。
    • 现在,将“Codes\WebApp”下的所有文件复制到您要部署的目录。例如,您已将这些文件复制到*“http//www.test/com/WebApp”*。现在,“http//www.test/com/WebApp/AutoUpdate.html”将显示您最新的位置,而“http//www.test/com/WebApp/LocationHistory.html”将允许用户浏览您的 GPS 轨迹!

安装

构建附带的*“MapMe”*项目(位于“Codes\MobileApp”目录下),并将“MapMe.jad”“MapMe.jar”文件复制到您的移动设备并安装它们。为了获得最佳 GPS 结果,请打开所有 GPS 定位方法。在我的Nokia N95 8GB上,我导航到“菜单/工具/设置/常规/定位/定位方法”并打开“辅助 GPS”“集成 GPS”“网络定位”

对于非 GPS 移动设备

如果您的移动设备没有内置 GPS,您仍然可以开发类似的应用程序。您需要使用CellIdCellID 是一个数字,与特定小区(您的手机连接的无线塔)相关联)并使用CellID的开源数据库(例如OpenCellID)。我建议您阅读这篇文章这篇文章,了解非 GPS 手机。

接下来是什么?

如果您来到这里,意味着您已经阅读了这篇长文(我希望您没有直接向下滚动到这里 :P)。我很想听听您对此实现的看法。分享您的想法,如果您喜欢,请投票并留下评论...

© . All rights reserved.