Use Geolocation to obtain geographical location information
This time I will bring you the use of Geolocation to obtain geographical location information, and what are the precautions for using Geolocation to obtain geographical location information. The following is a practical case, let's take a look.
Html5 provides an API for geographical location information to obtain the user's current location through the browser. Based on this feature, location-based service applications can be developed. Before obtaining geographical location information, the browser will first ask the user if they are willing to share their location information, and it can only be used after the user agrees.
Html5 obtains geographical location information through the Geolocation API, using its getCurrentPosition method. There are three parameters in this method, which are executed when the geographical location information is successfully obtainedCallback function, the callback function and optional attribute configuration items executed when failure occurs.
The following Demo demonstrates obtaining geographical location information through Geolocation and displaying the current location on Baidu Map (by calling Baidu Map API). The experimental results show that the location is located at the entrance of Huandong 4th Road in the university town. The deviation from my location (HuaGong student dormitory) is still a bit large, reaching about 200-300 meters.
The code is as follows (convertor.js is the coordinate conversion file provided by Baidu Maps):
<!DOCTYPE html>
<html>
<head>
<title>H5地理位置Demo</title>
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">
</script>
<script type="text/javascript" src="convertor.js">
</script>
</head>
<body>
<p id="map" style="width:600px; height:400px">
</p>
</body>
<script type="text/javascript">
if (window.navigator.geolocation) {
var options = {
enableHighAccuracy: true,
};
window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
} else {
alert("浏览器不支持html5来获取地理位置信息");
}
function handleSuccess(position){
// 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// 调用百度地图api显示
var map = new BMap.Map("map");
var ggPoint = new BMap.Point(lng, lat);
// 将google地图中的经纬度转化为百度地图的经纬度
BMap.Convertor.translate(ggPoint, 2, function(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
});
}
function handleError(error){
}
</script>
</html>convertor.js file:
(function() { // 闭包
function load_script(xyUrl, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = xyUrl;
// 借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function() {
if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if (head && script.parentNode) {
head.removeChild(script);
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
head.insertBefore(script, head.firstChild);
}
function translate(point, type, callback) {
var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名
var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
+ "&to=4&x=" + point.lng + "&y=" + point.lat
+ "&callback=BMap.Convertor." + callbackName;
// 动态创建script标签
load_script(xyUrl);
BMap.Convertor[callbackName] = function(xyResult) {
delete BMap.Convertor[callbackName]; // 调用完需要删除改函数
var point = new BMap.Point(xyResult.x, xyResult.y);
callback && callback(point);
}
}
window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of paging query
Detailed explanation of the use of foldable panels in JS
The above is the detailed content of Use Geolocation to obtain geographical location information. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1666
14
1425
52
1327
25
1273
29
1252
24
How to modify Douyin IP location
May 04, 2024 pm 04:36 PM
Yes, you can modify the Douyin IP location as follows: Open Douyin and edit your profile. Modify the city information and select the city or region you want to display. Log out and log back in for the changes to take effect.
Does Amap require mobile phone registration?
May 05, 2024 pm 05:12 PM
Yes, for security, personalized services and account management, Amap requires registration with a mobile phone number. The registration steps include: Open the Amap app, click "My" and "Login/Register", select a mobile phone number to register, enter the mobile phone number to get the verification code, set a password to complete the registration.
How to post pictures and videos on Weibo
May 03, 2024 am 01:15 AM
The steps for posting pictures and videos at the same time on Weibo are as follows: Select related or complementary pictures and videos. Open the Weibo client and click the Publish button. Select the "Pictures & Videos" tab. Add pictures and videos (up to 9 pictures and 1 video). Enter text and add relevant information. Just publish it.
How is Douyin's IP address displayed? Does the IP address show real-time location?
May 02, 2024 pm 01:34 PM
Users can not only watch a variety of interesting short videos on Douyin, but also publish their own works and interact with netizens across the country and even the world. In the process, Douyin’s IP address display function has attracted widespread attention. 1. How is Douyin’s IP address displayed? Douyin’s IP address display function is mainly implemented through geographical location services. When a user posts or watches a video on Douyin, Douyin automatically obtains the user's geographical location information. This process is mainly divided into the following steps: first, the user enables the Douyin application and allows the application to access its geographical location information; secondly, Douyin uses location services to obtain the user's geographical location information; finally, Douyin transfers the user's geographical location information Geographic location information is associated with the video data they posted or watched and will
How to reset Douyin recommendations? How to change recommendation to featured?
May 08, 2024 pm 03:52 PM
As a social platform focusing on short videos, Douyin’s recommendation algorithm is one of its core functions. It can recommend relevant video content based on users' interests and behaviors. Sometimes users may want to reset the recommendation algorithm to get content more in line with their preferences. So, how to reset Douyin recommendations? How to change Douyin recommendation to featured? This article will answer both questions for you. 1. How to reset Douyin recommendations? 1. Open Douyin APP and enter your personal homepage. 2. Click the "Settings" icon in the upper right corner to enter the settings page. 3. On the settings page, find the "Recommended Management" option and click to enter. 4. On the recommendation management page, you can see your interest tags and interest preferences. You can select or deselect different
How to modify location permissions on TikTok
May 03, 2024 pm 11:24 PM
Steps to modify Douyin location permissions: 1. Open the Douyin app and click "Me". 2. Click the "three horizontal bars icon" in the upper right corner. 3. Select Settings. 4. Find "Privacy Settings" and click on it. 5. Click "Location Services". 6. Select Allow targeting or Only ask when using, as appropriate. 7. After modification, you need to restart the Douyin application to take effect.
How to change recommendation settings on TikTok
May 04, 2024 am 12:06 AM
Douyin recommendations can be changed by changing the "Content Preferences" settings, including adjusting recommended video types, following interested creators, blocking disliked content, setting video language, geographical location restrictions, following hot topics and clearing search/browsing history .
How to change TikTok time zone settings
May 04, 2024 am 01:57 AM
Douyin time zone settings cannot be changed, the time zone will be automatically set based on the current geographical location.
