找回密码
 立即注册

QQ登录

只需一步,快速开始

微信葡京娱乐网址号开发资源

关注:848

所属分类: 微信开发 微信葡京娱乐网址号开发资源

本版块为微信葡京娱乐网址号开发教程与葡京娱乐网址号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[html5开发博客] 最简单的移动端H5定位地理位置

[复制链接]
查看: 3867|回复: 7
最佳答案
0 

5

主题

10

帖子

141

积分

新人求带

积分
141
w3school中的例子,如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图:
实例
  1. function showPosition(position)
  2. {
  3. var latlon=position.coords.latitude+","+position.coords.longitude;

  4. var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  5. +latlon+"&zoom=14&size=400x300&sensor=false";

  6. document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
  7. }
复制葡京赌场网站


移动端的H5页面提供了定位的功能,那么如何实现一个最简单的需求-----获取用户当前城市?

你可能搜一下就会找到N篇博客介绍,但是你会发现你看完大段葡京赌场网站之后还是没搞清楚,为了便于大家理解,我精简了葡京赌场网站,只保留了必要的部分。
1、在html页面引入百度地图API(文档地址:http://developer.baidu.com/map/w ... /guide/introduction
  1. <script src="http://api.map.baidu.com/api?ak=你的AK码&v=2.0&services=false"></script>
复制葡京赌场网站

2、js葡京赌场网站使用h5的geolocation方法获取坐标,然后使用百度api的getlocation方法翻译成你想要得结果
  1. navigator.geolocation.getCurrentPosition(function (position) {
  2.         var lat = position.coords.latitude;
  3.         var lon = position.coords.longitude;
  4.         var point = new BMap.Point(lon, lat);  // 创建坐标点
  5.          // 根据坐标得到地址描述
  6.         var myGeo = new BMap.Geocoder();
  7.         myGeo.getLocation(point, function (result) {
  8.             var city = result.addressComponents.city;
  9.             $('body').html(city);
  10.         });
  11.      });
复制葡京赌场网站

3、打开手机试一下吧

可以参考下w3school的教程http://www.w3school.com.cn/html5/html_5_geolocation.asp
回复

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 22:06:09 | 显示全部楼层
这个厉害了,先看看
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 23:50:05 | 显示全部楼层
it is good news!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

30

积分

等待验证会员

积分
30
发表于 2019-2-27 14:25:27 | 显示全部楼层
32225669_201902231437510865297877.png


32225669_201902231438270896689297.png


32225669_201902231439090959580808.png



32225669_201902231451370756739065.png



32225669_201902231503100084845495.png


32225669_201902270850570728966852.png


32225669_201902221312490515767718.jpg



回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

259

帖子

4604

积分

专家路上

积分
4604
发表于 2019-3-10 17:53:00 | 显示全部楼层
最简单的移动端H5定位地理位置
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

259

帖子

4604

积分

专家路上

积分
4604
发表于 2019-3-10 17:53:33 | 显示全部楼层
最简单的移动端H5定位地理位置
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

778

帖子

8903

积分

S1

积分
8903
发表于 7 天前 | 显示全部楼层
666666666666666
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]