Weather window display and weather display
Location and geographic location information are the core of the LBS application. What is different from the positioning function is that location information focuses more on how to get meaningful information. (For example, a street address) from this article, you will learn various features of HTML5 geographic location information. It provides multiple functions from the user's specific location to the path navigation. There are many ways to know where you are by using IP addresses, wireless communication between mobile phones and base stations, and GPS positioning. However, it is no longer a good time to locate customers by obtaining their IP addresses. HTML5 has a set of APIs that allow your devices to use javascript to effectively obtain geographical location information (iPhone 3/android2.0 or later, or a desktop browser ). The geographic location API supports the following browsers and mobile phones:
-
- Google Chrome 5.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 5.0
- Opera 16.0
- The Iphone 3.0
- For Android 2.0
- Opera Mobile 10
- Blackberry operating system 6.0
Security and AccuracyWhen you need to share a geographical location with a remote server, the browser will ask for your authorization through a pop-up box or a prompt message displayed at the top of the browser. The smartphone will prompt you when installing the relevant APP.
The above infobar pop-up box is non-modal and disappears after you select other browsing pages. There is no way to bypass the infobar that requires authorization. This feature ensures that location information can be shared only by authorized browsers. As customers can understand,
- The website you are notified of to obtain your address and location.
- You can choose to share or not share
- You can save the default options for this option. Similar prompts on this website will not appear again.
There are multiple technologies that can be used to obtain users' locations, each of which has different precision. Desktop browsers may use WIFI (precise to 20 meters) or IP addresses for location (precise to the city level only and false positives may occur ). Mobile devices tend to use triangular positioning technologies such as GPS (precision 10 meters for outdoor purposes only), WIFI and GSM/CDMA (precision 1000 meters ).
Weather windowThe following example uses the HTML address location API and OpenWeather API. This example is simple and does not fully use all functions of OpenWeather API. This is the window:
Starting from the html section. Html references third-party javascript and CSS. In the page initialization stage, the javascript method getLocation is called as follows:
Tables with different CSS styles are used:
Use div in the table, and then use javascript to overwrite:
Then, use the free OpenWeather API to obtain and display weather information in Jason format. The following defines some global variables, including obtaining static URLs for current weather, weather forecasts for the next five days, and images.
In the getLocation method, you need to determine whether the current browser supports obtaining the geographic location API,
If not supported by the browser, the following information is displayed,
The Geolocation API provides two methods to obtain the user's address location information, getCurrentPosition and watchPosition. The differences between the two methods will be briefly discussed later. Both methods return immediately, and then use the asynchronous method to obtain the user's location. Both use the same number of parameters: a. enableHighAccuracy-the default value is false. If this parameter is set to true, the response time slows down. If it is used on a mobile device, GPS is used, which increases power consumption. B. timeout-the default value is 0, indicating no limit. Specifies the maximum waiting time for a response. Here we set the timeout time as follows:
C. maximumAge-in milliseconds, the default value is 0. Specifies the maximum time for the cache location information that the application can accept. 0 indicates obtaining the new location information immediately.
In the errorCallback method, we use the error code to correspond to the corresponding error message:
Abstract:
- Determine whether the API for obtaining geographic location information is supported.
- If yes, call the getCurrentPosition method. Otherwise, call the errorcallback method.
- If the getCurrentPosition method is called successfully, the returned result is processed by the specified method. (GetCurrentWeatherData)
- The getCurrentWeatherData method further processes the returned postion object.
GetCurrentPosition and watchPositionThe watchPosition method will be notified when the position is changed. This is useful in some location-driven Apps and can be used to track users' moving tracks. GetCurrentPostion is returned at a time. The watchPosition method returns the watchId. You can use the clearWatch method when you do not need to update the position continuously.
PositionThe Position object mentioned above contains the following attributes:
The URL that calls the OpenWeather API uses the Position object's related attributes as follows:
We use the XMLHttpRequest object and OpenWeather server for data exchange. After the request data is sent, we want to perform some operations according to the response. The onreadystatechange event is triggered every time the readyState attribute of the XMLHttpRequest object is changed. methods defined on this event are automatically called. The Value List of the readyState attribute is as follows: 0: request not initialized 1: server connection established 2: request received ed 3: processing request 4: request finished and response is ready state property returns "200" to indicate OK, "404" to indicate that the page is not found. When the readyState value is 4 and the state value is 200, the response is returned correctly. The responseText object returned by parsing is a Json object, and then the Parse method is called to Parse the Json object and convert it to the content to be displayed.
Now you can use the open and send methods of the XMLHttpRequest object:
Process Json objectsYou can use the Json. parse method to parse and access the Json object through "." or. Json is similar to XML because it is self-described and layered and obtained by using XmlHttpRequest. It can be parsed in multiple languages. Different from XML, Json does not need to be parsed using the Xml parser. You can directly use javascript. Json data is in the name/value pair format, separated by commas. Use braces to separate objects and use brackets to save arrays. The following is an example of a Json object returned from OpenWeather API:
The following shows how to use a Json object to display the returned weather information:
