HTML5 geolocation API获得用户当前城市名

最新推荐文章于 2021-09-02 16:19:44 发布
最新推荐文章于 2021-09-02 16:19:44 发布
阅读量1.6k 收藏
点赞数
分类专栏： js css html
js 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
html
7 篇文章 0 订阅
订阅专栏
css
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html  >
<head>

    <title>HTML5 Demo: geolocation</title>
      <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAZNVcM3B5rUU5SJeXURUaBxTBfUk9TZrBRaIteybtnU2KziHEpRTn4b5CncoKZUG6YvDa1nKeST_Y5A"
      type="text/javascript"></script>
    </head>

<body  >
     <script>
         var geocoder = null;
         function addAddressToMap(response) {
             if (!response || response.Status.code != 200) {
                 alert("对不起，不能解析这个地址");
             } else {

                 var add = "";
                 for (var i = 0; i < response.Placemark.length; i++) {
                     add += response.Placemark[i].address + " | ";
                 }
                 alert("您查找的位置是 : "   + add.substr(5,3));
             }
         }

         function showLocation(address) {

             if (GBrowserIsCompatible()) {
                 geocoder = new GClientGeocoder();
                 geocoder.getLocations(address, addAddressToMap);
             }
         }


         function success(position) {
         alert(position.coords.latitude);
         alert(position.coords.longitude);
              showLocation(position.coords.latitude + "," + position.coords.longitude);
             return position.coords.latitude + "," + position.coords.longitude;
         }

         function error(msg) {
             //            var s = document.querySelector('#status');
             //            s.innerHTML = typeof msg == 'string' ? msg : "failed";
             //            s.className = 'fail';

             // console.log(arguments);  
         }

         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(success, error);
         } else {
             error('not supported');
         }


    </script>



</body>

</html>



http://zhan.renren.com/lovecodes?gid=3602888498024546812&from=post&checked=true


或者画出地理位置图： http://www.2cto.com/kf/201205/130760.html


jinglier
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
省市区js（可以得到行政代码和对应的名称）
08-21
可以得到省、市、区的行政代码和名称。用于网页的地址字段。
javascript使用百度地图api和html5特性获取浏览器位置
10-26
在现代Web开发中，利用HTML5的Geolocation API和第三方地图API，如百度地图API，可以轻松实现获取用户浏览器所在位置的功能。这篇文章将详细介绍如何结合这两种技术来获取并展示用户的地理位置信息。 首先，HTML5的...
html 获取用户地理位置,HTML5 geolocation API获得用户当前地理位置
weixin_39631445的博客
06-04 360
html5 里面引入了geolocation的api可以帮助用户获得所在的地理位置，它不仅可以标示出当前的经纬度，还可以与google map api结合使用来在地图上标示出当前位置。html代码，主要就是2大块，第一部分的容器用于放google地图和标示位置，第二部分用于显示精确的经纬度以及精度(误差)。1.2.3.4.5.6.在页面上使用google map，获取浏览器的当前位置7...
HTML5获取用户地理定位
大大大禹的专栏
05-11 1163
安全和隐私 用户通过浏览器对话框接受您的网站访问他们的位置，所以你不能在它们不知道的情况下使用它进行间谍活动。 访问地理位置 地理位置可以在JavaScript中通过浏览器的navigator.geolocation对象访问。地理位置对象允许你通过两个基本方法访问地理位置： getCurrentPosition() watchPosition() g
通过 GPS 信息获取当前所在城市名的代码
yohohohoho的专栏
11-09 759
利用 iPhone、iPad 自带的 GPS 信息可以获得当前位置坐标，但直接高速用户坐标是不行的。CocoaChina 会员"laigb"分享了通过 GPS 信息获取当前所在城市名的代码，希望对苹果开发者有所帮助。     - (void)startedReverseGeoderWithLatitude:(double)latitude longitude:(double)longitud
获取当前位置城市
肖肖肖丽珠的博客
05-04 580
点击按钮获取您当前坐标（可能需要比较长的时间获取）： 点我 var x=document.getElementById("demo"); function getLocation() {     if (navigator.geolocation)     {         navigator.geolocation.getCurrentPosition(showPosit
Learn-HTML5-Geolocation:经纬度逆解析
05-16
HTML5的地理定位API（Geolocation）是现代Web开发中的一个重要功能，它允许网页应用程序获取用户的地理位置信息，如经度和纬度。这个API在移动设备上的应用尤为广泛，为地图服务、本地搜索、导航和其他位置相关的...
HTML5实现城市突发预警平台实时监控模板特效源码.zip
11-04
在城市预警系统中，这个API可以用来定位用户的位置，并根据当前位置提供相关的预警信息。用户无需手动输入地址，系统就能自动提供附近的预警情况，增强了用户体验。 除此之外，HTML5的Web Storage（包括...
html5地区三级联动
03-19
同时，JavaScript还可以实现自动获取用户位置的功能，通过Geolocation API获取到用户的地理位置信息，并填充到相应的选择器中。 3. CSS样式：为了模拟iOS的选取器样式，我们需要编写自定义的CSS样式。可以利用`...
html5选择当地城市天气预报代码.zip
07-04
这个功能是通过HTML5的Geolocation API来获取用户的地理位置信息，然后结合Web服务API获取相应的天气数据，并在页面上进行动态展示。 首先，让我们深入了解HTML5的Geolocation API。这个API允许网页应用获取用户的...
如何通过百度地图开发者api的城市名来获取城市所在的经纬度
wangdasheng123的博客
09-02 438
vargc=newthis.BMap.Geocoder(); gc.getPoint("广东省"+"广州市"+"中国",(res)=>{//传入所需要的参数string if(res){ var lat=res.lat;经度 var lat=res.lng;维度 } }) ...
使用navigator.geolocation来获取用户的地理位置信息
精彩人生
02-20 2131
来源：http://js8.in/672.html W3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。本文中将简单介绍下W3C的Geolocation。 Geolocation在javascript的navigat
H5获取用户所在城市 网页获取用户城市名称
a_靖的博客
08-20 3852
获取用户城市名称，这里我是使用的百度地图JSAPI 2.0文档链接 实现步骤： 1.在index.html中引用百度地图的js文件，如下：(需要使用自己的ak,获取方式：点击去官网申请ak) <script src="http://api.map.baidu.com/api?v=2.0&ak=itxK6YP7wPbjXx55yhw7PdQ14HRVawPk">&lt...
如何获取用户当前城市？
小白搬代码的博客
12-12 1806
1、在html页面引入百度地图API（AK码详细获取地地址https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html 百度地图开放平台http://lbsyun.baidu.com/）<script src="http://api.map.baidu.com/api?ak=你的AK码&v=2.0&services=false"></
Vue：获取当前定位城市名
任她雨雪风晴
12-30 1万+
实现思想：通过定位获取到当前所在城市名； 1、在工程目录index.html中引入： &lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=您的密钥"&gt;&lt;/script&gt; ps：秘钥可以去百度开发者平台申请 2、在build/webpack.base.conf.j...
html5 geolocation / 百度地图api Geolocation 定位当前城市信息
热门推荐
非专业程序员小田
08-07 2万+
今日开端：  根据当前所处位置 定位所在城市信息    刚开始采用html5的 geolocation 来获取当前所在经纬度   折腾一番终不能获取城市信息 只能获取到当前的经纬度    查找一番了解到百度已封装该html5 geolocation 特性 链接地址： Class:服务类/Geolocation   于是 自己就写了一个简单的案例 如下所示： js 百度
百度API获取城市名地名(附源码)
djun100的专栏
09-02 992
在做一个软件时，用到了定位功能。网上有很多关于google 的GPS定位，但网上关于google定位都没有用， 搜索下原因：（这里建议大家在中国就尽量不使用系统自带的定位） 因为Google的服务器不在中国（就算能网上关于定位的代码能用，那也非常的慢，除非你的应用是在国外使用） 由于网络等原因所以定位一般会失败 于是转向使用百度api来定位。 所用到的百度API...
网页获取用户所在城市
weixin_34088838的博客
09-15 429
&lt;html&gt; 　　&lt;head&gt; 　　　　&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 　　　　&lt;title&gt;自动获取定位访问者当前城市&lt;/title&gt; 　　　　&lt;!--不可省略--&gt; 　　　　&lt;
js调用geolocation利用百度api显示省市
最新发布
06-06
在这个示例中，我们使用了百度地图的JavaScript API，并通过`navigator.geolocation`获取了用户当前的经纬度信息，然后通过`BMap.Geocoder`逆地理编码获取了省市信息，并将其显示在一个弹出框中。 需要注意的是，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值