H5 获取地理位置

只能通过手机浏览器访问,并且用户必须允许访问才可以生效

<!doctype html>
<html>
  <head>
        <title>Mobile Cookbook</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
    </header>
        <div id="main">
            <div id="someElm">
            </div>
        </div>
    <footer>
    </footer>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
    function getLocation() {
    navigator.geolocation.getCurrentPosition(showInfo);
  }
  function showInfo(position) {
      console.log(position);
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var accuracy = position.coords.accuracy;
    $(‘#someElm‘).html(‘latitude: ‘+latitude+‘<br />longitude: ‘+longitude+‘<br />accuracy: ‘+accuracy);
  }
  getLocation();
    </script>
    </body>
</html>

时间: 2025-01-05 16:19:42

H5 获取地理位置的相关文章

Html5 Geolocation获取地理位置信息(转)

Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项. 如下Demo演示了通过Geolocation获取地理位置信息,并在百度地

微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery)

复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示. 图7.1  7.1节文件结构 在location.js中,封装“getLocation”接口,如下: 01 wxJSSDK.location = function(locationApi){ 02 if(wxJSSDK.isReady){ //wxJSSDK.isReady 查看微信JSSDK是否初始化完毕 03 if(locationApi){ 04 locationApi.getLocation && wx

XMPP-利用CoreLocation获取地理位置以及CLLocationManager 为什么就不调用代理

最近做基于XMPP的即时通讯,把相关内容总结整理下来看看! 一.利用CoreLocation获取地理位置 利用CoreLocation,必须在frameworks里面加入"CoreLocation.framework",然后类中import <CoreLocation/CoreLocation.h> 1.定义成员变量 #import "LocationHelper.h" @interface LocationHelper ()<CLLocation

html5获取地理位置信息API

在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位置的信息,该API可以应用在移动设备上的地理定位:为window.navigator 对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象中的geolocation属性有三个方法如下: 第一个方法是:getCurrentPosition 该方法来取得

通过window.navigator对象获取地理位置信息并在百度地图上显示

通过window.navigator对象获取地理位置信息 Geolocation API:用户可共享地理位置,并在Web应用的协助下享用位置感知服务(location-aware services) window.navigator下的geolocation 对象的 getCurrentPosition 方法可以获取当前位置.getCurrentPosition 方法将发起对位置信息的异步请求并将立即返回.如果该请求成功完成,则调用用来实现位置数据接收的成功回调. 下面演示如何调用 getCur

HTML5获取地理位置

HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Internet Explorer 9.0+ 手机支持情况: Android 2.0+iPhone 3.0+Opera Mobile 10.1+Symbian (S60 3rd & 5th generation)Blackberry OS 6Maemo 检测浏览器是否支持: if (navigator.geol

基于HTML5的Geolocation获取地理位置,配合Google Map API反向地址解析(获取用户真实地址)

html 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>Geolocation获取地理位置,配合Google Map API

【原创】微信公众号与HTML 5混合模式揭秘——JSSDK获取地理位置

微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 JSSDK为开发者提供了两个位置API服务:获取地理位置和使用微信内置地图查看位置. 下面还是沿用以往的实战演示方法.先创建一份location.js文件,为“wxJSSDK”增加“location”的相关API,代码如下: 01 wxJSSDK.location= function(locationApi){ 02 if(wxJSSDK.isReady){//wxJSSD

PhoneGap Geolocation结合百度地图api获取地理位置api

一.使用百度地图API 1.地址:http://developer.baidu.com/map/ 2.在js DEMO中获取反地址解析的DEMO 3.修改这个DEMO的密钥,去创建应用就能创建密钥,然后复制密钥到这个页面即可 4.使用PhoneGap Geolocation 获取地理位置获取到的经度和纬度赋值给point即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <