开心人生

用今天的努力----实现我所向往的明天

导航

浏览器获取地理位置

转自:http://smithsrus.com/gps-geolocation-in-safari-on-iphone-os-3-0/

GPS Geolocation in Safari on iPhone OS 3.0

I just updated my iPhone to the shiny new OS 3.0. Apple did a great job addressing a few shortcomings and adding new features. Others have alreadytold about the common features so I won’t rehash them here.

But let me tell you about my favorite new feature: Safari can now get your GPS location via javascript! This is usually referred to as geolocation. You can easily grab the current location or get periodic updates.

Okay, so I’m excited over what may seem like an obscure geeky feature, but I think it’s a big deal.

Why GPS in Safari is a Big Deal

  1. Location aware Web pages: Have you ever gone to a company’s Web site to find their nearest location? You usually have to type in your zip code. But what if you’re traveling and don’t know your zip code? Safari knowing your location solves that problem.

  2. Location aware Web applications: It’s fairly easy to create Web content looks and behaves like an iPhone application. Now those can take advantage of location information.

    For example, I’ve been working with a company on an iPhone Web application that interacts with their internal customer database. Field reps can now easily find customers within a certain radius of the rep’s current location who meet various other criteria.

Web Geolocation Privacy and Standards

Don’t worry, all of this is built with good privacy controls. You are asked permission before your location data is revealed to a site. For convenience, it stops asking about a particular site after you have approved it a few times.

These location features are based on the upcoming Geolocation API Specification. Because it’s not just a proprietary Safari thing it should get widespread adoption. In fact, it’s already built into the latest Firefox 3.5 beta.

Web Geolocation Sample Code

The specifications do a good job of explaining the parts so no need to go over all of that. However, it’s worth pointing out how to check and see if geolocation features are available or not and take appropriate action. For example, you may only want to show GPS options if it can actually be used. This simple snippet will do the job.

if (navigator.geolocation) {  
        /* Code if geolocation is available. */  
} else {  
        /* Code if geolocation is not available */
}

Let’s put it all together in a simple Web page that displays all of the geolocation variables for your current location. The code is below or you can try mygeolocation test page from your iPhone.

(Yes, you’ll probably want to use modern DOM techniques for a real project. The purpose of this is just to show a simple working example.)

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta http-equiv="content-type" content="text/html; charset=utf-8">
                <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
                <title>Geolocation Test</title>
 
                <script language="javascript" type="text/javascript">
                        function getLocation() {
                                // Get location no more than 10 minutes old. 600000 ms = 10 minutes.
                                navigator.geolocation.getCurrentPosition(showLocation, showError, {enableHighAccuracy:true,maximumAge:600000});
                        }
 
                        function showError(error) {
                                alert(error.code + ' ' + error.message);
                        }
 
                        function showLocation(position) {
                                geoinfo.innerHTML='<p>Latitude: ' + position.coords.latitude + '</p>' 
                                + '<p>Longitude: ' + position.coords.longitude + '</p>' 
                                + '<p>Accuracy: ' + position.coords.accuracy + '</p>' 
                                + '<p>Altitude: ' + position.coords.altitude + '</p>' 
                                + '<p>Altitude accuracy: ' + position.coords.altitudeAccuracy + '</p>' 
                                + '<p>Speed: ' + position.coords.speed + '</p>' 
                                + '<p>Heading: ' + position.coords.heading + '</p>';
                        }
                </script>
        </head>
        <body>
                <script language="javascript" type="text/javascript">   
                        if (navigator.geolocation) {  
                                document.write('<p><input type="button" onclick="getLocation()" value="Show Geolocation Information" /></p>');
                        } else {  
                                document.write('<p>Sorry, your device or browser software does not appear to support geolocation services.</p>');  
                        }  
                </script>
 
                <div id="geoinfo"></div>
        </body>
</html>

I can’t wait to see some of the great things others will create by combining Web sites with location. And it will only get better as more devices become location aware. Be sure to let me know of good location-aware sites and web apps you run across.

Now go create something cool!

posted on 2010-07-20 21:32  hai  阅读(1123)  评论(0)  编辑  收藏  举报