Implementing mobile phone positioning based on h5 ajax-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Implementing mobile phone positioning based on h5 ajax

亚连

May 24, 2018 pm 05:22 PM

ajax html5 position

I have no projects to do recently. I am asking a friend to help me realize the mobile phone positioning function. There are many ways to achieve it. I used h5 and ajax to implement the mobile phone positioning. It is just a demo. I will continue to improve it in the future. I would like to share it with you. Everyone, friends who need it can refer to

. Because my friends need it, I looked at the mobile phone positioning of h5 before, and now I have written a demo and posted it here. Friends who are interested can take a look.

The current version is just a demo. There are still several issues that need to be improved. The questions are as follows:

1. How to send data such as longitude and latitude to the person being positioned so that they cannot see it? to the page.

2, how to bypass or force the person who opens the link to allow the use of positioning (pop-up window).

3. Currently or after obtaining the longitude and latitude, you need to use Google Earth to analyze the user's location (locate and display it through satellite maps). How to simplify this part so that the longitude and latitude of the person being located can automatically generate a map image and import it together? Go to other pages (in short, the targeted person cannot be aware of the fact that he or she is being targeted).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-">
<meta name="viewport" content="width=device-width, initial-scale=, maximum-scale=">
<title>demo..</title>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/../jquery.min.js"></script>
<style type="text/css">
.demo{width:px; margin:px auto px auto}
.geo{margin-top:px}
.demo p{line-height:px; font-size:px}
.demo p span,#baidu_geo,#google_geo{font-weight:bold}
</style>
</head>
<body>
<p id="main">
 <p class="demo">
  <p>地理坐标：<span id="latlon"></span></p>
  <p class="geo">
   <p>百度地图定位位置：</p>
   <p id="baidu_geo"></p>
  </p>
  <p class="geo">
   <p>GOOGLE地图定位位置：</p>
   <p id="google_geo"></p>
  </p>
 </p>
</p>
<script>
function getLocation(){
 if (navigator.geolocation){
  navigator.geolocation.getCurrentPosition(showPosition,showError);
 }else{
  alert("浏览器不支持地理定位。");
 }
}
function showPosition(position){
 $("#latlon").html("<br />纬度:"+position.coords.latitude +&#39;<br />经度:&#39;+ position.coords.longitude);
 var latlon = position.coords.latitude+&#39;,&#39;+position.coords.longitude;
 //baidu
 var url = "http://api.map.baidu.com/geocoder/v/?ak=Cbdaebdbbbabceb&callback=renderReverse&location="+latlon+"&output=json&pois=";
 $.ajax({ 
  type: "GET", 
  dataType: "jsonp", 
  url: url,
  beforeSend: function(){
   $("#baidu_geo").html(&#39;正在定位...&#39;);
  },
  success: function (json) { 
   if(json.status==){
    $("#baidu_geo").html(json.result.formatted_address);
   }
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) { 
   $("#baidu_geo").html(latlon+"地址位置获取失败"); 
  }
 });
 //google
 var url = &#39;http://maps.google.cn/maps/api/geocode/json?latlng=&#39;+latlon+&#39;&language=CN&#39;;
 $.ajax({ 
  type: "GET",
  url: url, 
  beforeSend: function(){
   $("#google_geo").html(&#39;正在定位...&#39;);
  },
  success: function (json) { 
   if(json.status==&#39;OK&#39;){
    var results = json.results;
    $.each(results,function(index,array){
     if(index==){
     $("#google_geo").html(array[&#39;formatted_address&#39;]);
     }
    });
   }
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) { 
   $("#google_geo").html(latlon+"地址位置获取失败"); 
  } 
 });
}
function showError(error){
 switch(error.code) {
  case error.PERMISSION_DENIED:
   alert("定位失败,用户拒绝请求地理定位");
   break;
  case error.POSITION_UNAVAILABLE:
   alert("定位失败,位置信息是不可用");
   break;
  case error.TIMEOUT:
   alert("定位失败,请求获取用户位置超时");
   break;
  case error.UNKNOWN_ERROR:
   alert("定位失败,定位系统失效");
   break;
 }
}
getLocation();
</script>
</body>
</html>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Solving the forward and backward problem of ajax based on Jquery.history

Realizing interval N based on Jquery ajax technology Pass value to a page in seconds

Understand the datatype attribute option value in jquery ajax

The above is the detailed content of Implementing mobile phone positioning based on h5 ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn