一个完整的可以输出移动端当前省市（地理坐标）的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](采集篇) 前言 大半年没写博客了,但 ...
随机推荐
- 01-【HAL库】STM32实现串口打印
一.什么是串口 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式,因为它简单便捷,因此大部分电子设备都支持该通讯方式,电子工程师在调试设备时也经常使用该通讯方式输 ...
- KingabseES 构造常量数据表的方式 union, values, array
背景 通用报表系统中,如果过滤条件是多选数据项,需要动态构造虚拟数据表,这里也会成为查询性能的痛点. 构造方式与执行计划 构造1000行数据的虚拟表. SQL UNION 组合多个查询的结果,需要解析 ...
- 2021 年 25 大 DevOps 工具（上）
DevOps 正在改变全球软件开发的状态,DevOps 正以某种形式有效地提高提高全球软件公司的上市速度.可销售性.创新和产品质量.2021 年是 DevOps 的重要一年.由于 DevOps 跨越开 ...
- 强！10.6K star，一款开源HTTP测试工具，适合新手，简单、容易上手！
大家好,我是狂师! 今天给大家推荐一款开源的HTTP测试工具:Hurl,相比curl.wget功能更强大,且更容易上手.很适用新手使用. 1.项目介绍 Hurl是一个使用Rust语言开发的命令行工具, ...
- #状压dp，背包，贪心#洛谷 5997 [PA2014]Pakowanie
题目 你有 \(n\) 个物品和 \(m\) 个包.物品有重量,且不可被分割: 包也有各自的容量.要把所有物品装入包中,至少需要几个包? 分析 考虑物品的数量很小,首先优先选容量大的背包, 设\(f[ ...
- C++ 智能指针和内存管理：使用指南和技巧
C++是一门强大的编程语言,但是在内存管理方面却存在着一些问题.手动管理内存不仅费时费力,而且容易出错.因此,C++中引入了智能指针这一概念,以更好地管理内存. 什么是智能指针? 在C++中,内存的分 ...
- Qt 实现涂鸦板一：简易涂鸦板
新建一个Qt项目,在 .h 文件中写入 #pragma once #include <QtWidgets/QWidget> #include "ui_xuexi.h" ...
- 课程预告丨12月15日官方直播带你领略ArkUI的声明式开发范式之美
方舟开发框架(ArkUI)的声明式开发范式有什么优势?Java/JS/eTS(extended TypeScript)三种语言,用哪种语言更好? 12月15日 19:00-20:30,Hello Ha ...
- button submit你以为你阻止了默认事件?
前言 先解决掉一个误区: 很多人写button的时候,就这样写: <button><botton> 你认为就是默认的submit的时候,这时候就可能出问题了. 当然之所以你没有 ...
- c# 解决死锁问题Monitor
前言 在高并发中,一个很关键的问题就是要避免死锁. 那么为什么会产生死锁呢?这种情况多见吗? 举一个例子: 比如方法一中先lock(object1),在lock(object1)中lock(objec ...