一个完整的可以输出移动端当前省市（地理坐标）的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](采集篇) 前言 大半年没写博客了,但 ...
随机推荐
- ArrayList扩容代码分析
ArrayList扩容机制是在面试中频繁出现的问题,平时了解的比较含糊,特此记录! 注意:每次发生扩容,其容量扩充为原来的1.5倍左右 add方法 public boolean add(E e) { ...
- KingabseES例程-函数和过程的 INVOKER 与 DEFINER
调用者权利和定义者权利子句 指定子程序的权利属性.权利属性影响单元在运行时,执行的SQL语句的名称解析和权限检查. PG模式: SECURITY INVOKER SECURITY DEFINER Or ...
- archlinux运行appimage
1.cd进入appimage所在的目录 cd your_folder 2.赋予appimage运行权限 chmod +x your_file.appimage 3.运行appimage格式文件 ./y ...
- Hexo+Gitee搭建个人博客
Hexo+Gitee搭建个人博客 (一)前言 beacuse(事出有因): 很久之前就知道Hexo搭建个人博客,但由于惰性,一直没有行动,在此之前一直用的是博客园. but(但是): 今天打开博客园, ...
- 福州大学MEM 备考总结
自己的基本情况 2022年8月2日,当天觉得休息的差不多了,思来想去,觉得考研是个不错的选择,和女朋友聊了一下,得到她的支持,于是乎定下目标.接着就是开始在网络上查找相关的材料,先把要报考高校和专业的 ...
- OpenAtom OpenHarmony三方库创建发布及安全隐私检测
OpenAtom OpenHarmony三方库(以下简称"三方库"或"包"),是经过验证可在OpenHarmony系统上可重复使用的软件组件,可帮助开发者快速开 ...
- Java 文件处理完全指南：创建、读取、写入和删除文件详细解析
Java 文件操作 文件处理简介 文件处理是任何应用程序的重要部分.Java 提供了许多用于创建.读取.更新和删除文件的方法. Java 文件处理 Java 中的文件处理主要通过 java.io 包中 ...
- C++ 编译器和链接器的完全指南
C++是一种强类型语言,它的编译和链接是程序开发过程中不可或缺的两个环节.编译器和链接器是两个非常重要的概念.本文将详细介绍C++中的编译器和链接器以及它们的工作原理和使用方法. 编译器 编译器是将源 ...
- 基于EtherNet/IP实现欧姆龙NX系列PLC通信
1.引言 工业以太网协议 (Ethernet/IP) 是由ODVA所开发并得到了罗克韦尔自动化的强大支持.它使用已用于ControlNet和DeviceNet的控制和信息协议 (CIP) 为应用层协议 ...
- 聚焦AI新技术，HMS Core机器学习服务为移动应用智能化注入新动力
近年来,以机器学习为代表的人工智能技术(以下简称AI技术)蓬勃发展.新算法层出不穷,开发出的图像识别.自然语言.活体检测等能力令智能化的未来生活不再遥不可及.同时,这些AI技术正持续演化和发展,数据和 ...