根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】

是想让地图的定位用户位置更准确一些。

查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp

看介绍中拿数据挺简单。

 

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮,获得您的坐标:</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition);}else{x.innerHTML="Geolocation is not supported by this browser.";}}
function showPosition(position){x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;    }</script>
</body>
</html>

 

正确点击按钮能拿到返回的经纬度

有个问题是:    navigator.geolocation.getCurrentPosition(showPosition);   这个回调,有时有,有时没有 ,不稳定。  还有就是出来的经纬度弄到地图上,我了个去,跑到广州了。。。

 

--------------------------------------

本身百度地图api 

ip定位:   http://lbsyun.baidu.com/jsdemo.htm#i8_2 ,  有点糙,显示的是城市名

浏览器定位:  http://lbsyun.baidu.com/jsdemo.htm#i8_1   ,拿到经纬度展示,大概的。

 

百度有个 Geolocation, 打开上面的2个中一个,替换下<script>代码如下,执行下

<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398,39.897445);map.centerAndZoom(point,12);var geolocation = new BMap.Geolocation();  //实例化浏览器定位对象。//下面是getCurrentPosition方法。调用该对象的getCurrentPosition(),与HTML5不同的是,这个方法原型是getCurrentPosition(callback:function[, options: PositionOptions]),也就是说无论成功与否都执行回调函数1,第二个参数是关于位置的选项。 因此能否定位成功需要在回调函数1中自己判断。
geolocation.getCurrentPosition(function(r){   //定位结果对象会传递给r变量if(this.getStatus() == BMAP_STATUS_SUCCESS){  //通过Geolocation类的getStatus()可以判断是否成功定位。var mk = new BMap.Marker(r.point);    //基于定位的这个点的点位创建markermap.addOverlay(mk);    //将marker作为覆盖物添加到map地图上map.panTo(r.point);   //将地图中心点移动到定位的这个点位置。注意是r.point而不是r对象。alert('您的位置:'+r.point.lng+','+r.point.lat);  //r对象的point属性也是一个对象,这个对象的lng属性表示经度,lat属性表示纬度。}else {alert('failed'+this.getStatus());}        
},{enableHighAccuracy: true})
</script>

  

得到的是大致的经纬度,但城市是对的,位置有些偏差。

 -----------------------------

 

这个功能上,高德地图api更好一些 ,误差很小。

自定义定位图标: http://lbs.amap.com/api/javascript-api/example/location/custom-location-icon

 

浏览器定位:http://lbs.amap.com/api/javascript-api/example/location/browser-location

/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
***************************************/

 

 

很准的说, 需要升级 https

转载于:https://www.cnblogs.com/jshare/p/7066154.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/254270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#抽象类与密封类-abstract-sealed

文章目录抽象类和抽象方法实现抽象方法接口、类和抽象类密封类博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 如果说继承是面向对象设计理论的基石&#xff0c;那么抽象理论和方法就是继承理论的顶梁柱。 抽象类和抽象方法 简单的说&#x…

vs2010快捷键

Ctrl M O: 折叠所有方法 Ctrl M M: 折叠或者展开当前方法 Ctrl M L: 展开所有方法 1、强迫智能感知&#xff1a;CtrlJ&#xff1b;2、强迫智能感知显示参数信息&#xff1a;Ctrl-Shift-空格&#xff1b;3、格式化整个块&#xff1a;CtrlKF4、检查括号匹配(在左右括号间切…

startup毕业论文

今天起得相对比较晚&#xff0c;为的是一个没有目的面试&#xff0c;去了的结果。只是打击一下自己的自信心&#xff0c;走的时候&#xff0c;面试官冷冷的说了一句&#xff0c;你的面试到此结束&#xff0c;是的&#xff0c;我并没有很伤心&#xff0c;在门外等面试的时候&…

Javascript实现信息滚动效果的方法

<html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>向上无缝滚动</title><style>body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */}* { ma…

C# delegate与event,委托与事件

文章目录委托示例事件实例博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 委托和事件是C#中两个比较复杂的概念&#xff0c;这篇文章介绍两个概念与基本用法&#xff0c;让大家理解C#中的事件处理机制。 委托 委托也叫代理&#xff0c;就是把…

路由器与交换机的工作原理

路由器与交换机的工作原理 计算机网络往往由许多种不同类型的网络互连连接而成。如果几个计算机网络只是在物理上连接在一起&#xff0c;它们之间并不能进行通信&#xff0c;那么这种“互连”并没有什么实际意义。因此通常在谈到“互连”时&#xff0c;就已经暗示这些相互连接的…

Java的四种引用,强弱软虚,用到的场景(转+补充)

Q1&#xff1a;引用队列是什么&#xff1f;如何使用&#xff1f;使用的场景有哪些&#xff1f; A1:oracle的api文档的描述&#xff1a; https://docs.oracle.com/javase/7/docs/api/java/lang/ref/ReferenceQueue.htmlReference queues, to which registered reference objects…

C# lambda表达式与匿名方法

文章目录匿名方法Lambda表达式实例实例博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 C#中的匿名方法是在C#2.0引入的&#xff0c;它终结了声明委托的唯一方法是使用命名方法的时代。在C#更高版本中&#xff0c;Lambda表达式取代了匿名方法&a…

LINUx打包命令汇总

.tar 解包&#xff1a;tar xvf FileName.tar 打包&#xff1a;tar cvf FileName.tar DirName &#xff08;注&#xff1a;tar是打包&#xff0c;不是压缩&#xff01;&#xff09; ——————————————— .gz 解压1&#xff1a;gunzip FileName.gz 解压2&#xff1a;…

常用的相似度计算

在数据分析和数据挖掘的过程中&#xff0c;我们经常需要知道个体间差异的大小&#xff0c;进而评价个体的相似性和类别。最常见的是数据分析中的相关分析&#xff0c;数据挖掘中的分 类和聚类算法&#xff0c;如K最近邻&#xff08;KNN&#xff09;和K均值&#xff08;K-Means&…

玩转C#窗体-属性、方法和事件详细说明

文章目录简介Windows窗体的基本属性一、布局属性1、StartPosition属性2、Location属性3、尺寸属性4、WindowsState属性5、Autoscroll属性6、AutoSize属性二、样式属性1、ControlBox属性2、MaximizeBox属性3、MinimizeBox属性4、HelpButton属性5、ShowIcon属性6、Icon属性7、Sho…

for循环和数组练习

//公鸡2文&#xff0c;母鸡1文&#xff0c;小鸡半文&#xff0c;每种至少一只&#xff0c;100文买100只鸡有多少种可能var ci 0; for(var g1;g<50;g){for(var m1;m<100;m){for(var x1;x<100;x){if(g*2m*1x*(0.5)100&&gmx100){ci1;console.log("买公鸡&qu…

CMD下查看路由表

在cmd下面输入route print 就可以查看路由表 如何读懂路由表如何读懂路由表 源码:--------------------------------------------------------------------------------Active Routes: Network Destination Netmask Gateway Interface M…

c# automapper 使用

一、最简单的用法 有两个类User和UserDto 1 public class User2 {3 public int Id { get; set; }4 public string Name { get; set; }5 public int Age { get; set; }6 }7 8 public class UserDto9 { 10 public string Na…

js正则归纳

/* * 正则的缓存区 * 一、 var numadb1122;var reg/(\d)\1(\d)\2/gi;console.log(num.match(reg));//[ 1122 ]二、普通字符&#xff1a;a b c 1 2 3 特殊字符&#xff1a;\d \w \D //w d 是什么三、元字符中限定符* &#xff1a; 匹配0到多 &#xff1a; 匹配1到…

洛谷 P1469 找筷子

题目描述 经过一段时间的紧张筹备&#xff0c;电脑小组的“RP餐厅”终于开业了&#xff0c;这天&#xff0c;经理LXC接到了一个定餐大单&#xff0c;可把大家乐坏了&#xff01;员工们齐心协力按要求准备好了套餐正准备派送时&#xff0c;突然碰到一个棘手的问题&#xff0c;筷…

玩转C#控件-常用控件属性

文章目录概述Control类的基本属性1、Name属性2、Text属性3、Anchor属性4、Dock属性Control类的方法和事件博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 概述 控件是包含在窗体上的对象&#xff0c;是构成用户界面的基本元素&#xff0c;也是…

LazyT 提供对延迟初始化的支持

延迟初始化 就是在第一次使用的时候在 进行类的初始化 public class Student{public Student(){this.Name "DefaultName";this.Age 0;Console.WriteLine("Student is init...");}public string Name { get; set; }public int Age { get; set; }} public…

264标准中高复杂度的三方面

一、运功估计搜索 二、码率控制 三、滤波算法 在264中&#xff0c;这三方面占据了绝大部分的计算复杂度。具体原因或是优化的具体步骤有时间补上。

ie浏览器不支持多行隐藏显示省略号

平时在写页面过程中&#xff0c;相信大家都遇到过文本显示多行后用省略号代替的问题&#xff0c;来看看代码&#xff1a; p{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp:12;//表示显示12行之后用省略号代替-webkit-box-orient:vertical…