一个完整的可以输出移动端当前省市（地理坐标）的html页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>移动端获取用户地理位置</title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/getPosition.js"></script>
</head>
<body>
<p>页面加载弹窗获取用户地理位置</p>
</body>
</html>
<script>
//获取当前位置的经纬度
function getCoordinate(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
let latitude = position.coords.latitude
let longitude = position.coords.longitude
getProAndCity(latitude,longitude)
},
function (e) {
throw(e.message);
}
)
}
}
// 通过当前经纬度和百度map查找对应省市
function getProAndCity(latitude,longitude){
$.ajax({
url: 'http://api.map.baidu.com/geocoder/v2/?ak=wWYw0yCb8ntXmSgTxTx40vKR&callback=renderReverse&location=' + latitude + ',' + longitude + '&output=json&pois=1',
type: "get",
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
alert(data.result.addressComponent.province);
alert(data.result.addressComponent.city);
alert(data.result.addressComponent.district);
if (typeof callback == "function") {
callback(data);
}
} ,
error:function(){
alert('err')
}
});
}
getCoordinate()
</script>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
p{
font-size: 14px;
}
</style>
一个完整的可以输出移动端当前省市（地理坐标）的html页面的更多相关文章
- Android 6.0一个完整的native service
上一篇博客<Android 6.0 如何添加完整的系统服务(app-framework-kernel)>http://www.cnblogs.com/hackfun/p/7418902. ...
- [译]Python中的异步IO:一个完整的演练
原文:Async IO in Python: A Complete Walkthrough 原文作者: Brad Solomon 原文发布时间:2019年1月16日 翻译:Tacey Wong 翻译时 ...
- Istio技术与实践04：最佳实践之教你写一个完整的Mixer Adapter
Istio内置的部分适配器以及相应功能举例如下: circonus:微服务监控分析平台. cloudwatch:针对AWS云资源监控的工具. fluentd:开源的日志采集工具. prometheus ...
- 【如何快速的开发一个完整的iOS直播app】(美颜篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...
- 【如何快速的开发一个完整的iOS直播app】(采集篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...
- 【如何快速的开发一个完整的iOS直播app】(原理篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...
- Django1.8教程——从零开始搭建一个完整django博客（一）
第一个Django项目将是一个完整的博客网站.它和我们博客园使用的博客别无二致,一样有分类.标签.归档.查询等功能.如果你对Django感兴趣的话,这是一个绝好的机会.该教程将和你一起,从零开始,搭建 ...
- 【如何快速的开发一个完整的iOS直播app】(推流篇)
前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,肯定需要流媒体服务器,本篇主要讲解直播中流媒体服务器搭建,并且讲解了如 ...
- 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)
来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...
- 如何快速的开发一个完整的iOS直播app(原理篇)
目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...
随机推荐
- elasticsearch聚合桶排序、分页实战
很多时候业务上需要分组排序分页的场景,类似于mysql的group by xxx limit 0 10.so,当数据同步到es后,相同的需求场景也出现了.背景:商品根据商品销量排序,销量数据是以sku ...
- verilog注释及vscode插件terosHDL
模型功能 实现代码的注释的方法 基于vscode的文档自动生成 模型框图 `timescale 1ns / 1ps /* */ // ********************************* ...
- OREPA：阿里提出训练也很快的重参数策略，内存减半，速度加倍 | CVPR 2022
论文提出了在线重参数方法OREPA,在训练阶段就能将复杂的结构重参数为单卷积层,从而降低大量训练的耗时.为了实现这一目标,论文用线性缩放层代替了训练时的BN层,保持了优化方向的多样性和特征表达能力.从 ...
- FCOSv2：原作的扩展版本，小修小改，性能高达50.4AP | IEEE T-PAMI 2020
本文是对FCOS的小修小改,最终性能达到了50.4AP,可谓相当强劲了,大家在工程上可以参考其中的改进以及提升方法 来源:晓飞的算法工程笔记 公众号 论文: FCOS: A Simple and ...
- Debug模式调试技巧
Debug模式调试技巧 断点管理窗口 菜单栏方式 Run -> view breakpoints Actions方式 双击shift调出Actions窗口,输入view breakpoint ...
- #线性dp#洛谷 5999 [CEOI2016]kangaroo
题目 问有多少个长度为 \(n\) 的排列满足首项为 \(st\),末项为 \(ed\), 并且 \(\forall i\in (1,n),\left[a_{i-1}<a_i \oplus a_ ...
- #区间dp#CF1114D Flood Fill
题目 有一个长度为\(n\)的颜色序列,在游戏前选择一个固定的位置, 若当前轮该位置的颜色为\(x\),那么可以将所有颜色为\(x\)的连通块改为任意颜色, 问最少进行多少轮使得区间\([1,n]\) ...
- OpenHarmony携千行百业创新成果亮相HDC.Together 2023
8月4日-6日,华为开发者大会2023(以下简称"大会")在中国松山湖举办,OpenAtom OpenHarmony(简称"OpenHarmony")隆重参会 ...
- 30分钟成为Contributor｜如何多方位参与OpenHarmony开源贡献？
如何优雅地参与开源贡献,向顶级开源项目提交 PR(Pull Request).战"码"先锋直播间第八期围绕"OpenAtom OpenHarmony(以下简称" ...
- RabbitMQ 04 直连模式-Java操作
使用Java原生的方式使用RabbitMQ现在已经较少,但这是基础,还是有必要了解的. 引入依赖. <dependency> <groupId>com.rabbitmq< ...