根据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# delegate与event,委托与事件

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

常用的相似度计算

在数据分析和数据挖掘的过程中&#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…

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…

API设计原则 - Qt官网的设计实践总结

原文链接&#xff1a;API Design Principles - Qt Wiki 基于Gary的影响力上 Gary Gao 的译文稿&#xff1a;C的API设计指导 译文发在酷壳 - CoolShell&#xff1a;API设计原则&#xff0c; 2017-07-25 API设计原则 - Qt官网的设计实践总结 &#x1f34e; 译序 Qt的设计水准在业…

QtCreator5.12.6安装图文教程

前言接触过Qt的同学肯定用过QtCreator,本id最近常用&#xff0c;也就写个教程记录一下安装的过程。可能比较少人学过Qt&#xff0c;感觉Qt还是挺不错的&#xff0c;做出来的界面还算好看&#xff0c;关键是跨平台。说明&#xff1a;安装的系统&#xff1a;win10专业版QtCreator…

H.264学习(一)——帧和场的概念

一、何谓场&#xff1f; 每个电视帧都是通过扫描屏幕两次而产生的&#xff0c;第二个扫描的线条刚好填满第一次扫描所留下的缝隙。每个扫描即称为一个场。因此 25 帧/秒的电视画面实际上为 50 场/秒 (若为 NTSC 则分别为 30 & 60 - 因为我是中国人&#xff0c;因此我采用 P…

RabbitMQ for windows

一、搭建环境 Rabbit MQ 是建立在强大的Erlang OTP平台上&#xff0c;因此安装RabbitMQ之前要先安装Erlang。 erlang&#xff1a;http://www.erlang.org/download.html rabbitmq&#xff1a;http://www.rabbitmq.com/download.html 我目前使用的&#xff1a;http://pan.baidu.c…

圆环内外圆毛刺(凸起)缺口(凹陷)检测halcon

文章目录处理要求处理方法1方法一思路方法一halcon源码处理效果处理方法2方法二思路方法二halcon源码处理效果博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 处理要求 椭圆/圆环&#xff08;产品易变形&#xff0c;为椭圆&#xff09;内外圆…

什么是单播、多播和广播br

什么是单播、多播和广播   “单播”&#xff08;Unicast&#xff09;、“多播”&#xff08;Multicast&#xff09;和“广播”&#xff08;Broadcast&#xff09;这三个术语都是用来描述网络节点之间通讯方式的术语。那么这些术语究竟是什么意思&#xff1f;区别何在&#…

圆环同心度测量halcon

文章目录处理要求处理源码处理结果博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 处理要求 测量圆环同心度 处理源码 read_image (Image, C:/Users/22967/Desktop/图像Barrel 20201024/201024 手机行业 摄像头检测/Barrel 背光/Pic_2020_…

IP组播与组播协议

IP组播与组播协议 2008-4-27来源:不详 作者:佚名 点击&#xff1a;次在Internet上&#xff0c;多媒体业务诸如&#xff1a;流媒体&#xff0c;视频会议和视频点播等&#xff0c;正在成为信息传送的重要组成部分。点对点传输的单播方式不能适应这一类业务传输特性--单点发送多点…

Spring Cloud的应用程序—上下文服务

2019独角兽企业重金招聘Python工程师标准>>> Spring Boot对于如何使用Spring构建应用程序有一个看法&#xff1a;例如它具有常规配置文件的常规位置&#xff0c;以及用于常见管理和监视任务的端点。Spring Cloud建立在此之上&#xff0c;并添加了一些可能系统中所有…

halcon圆环完整度检测

文章目录处理要求程序源码处理结果博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 处理要求 查找好的圆环&#xff0c;检测圆环不良 程序源码 read_image (Image, F:/HALCON/圆环完整性检测/6.bmp) rgb1_to_gray (Image, GrayImage) v…

圆环划痕检测halcon

文章目录处理要求处理源码处理效果博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 处理要求 查找圆环缺陷 处理源码 read_image (Image, F:/HALCON/圆环划痕处理/10_33221_ba4582f0e88ec79.bmp) rgb3_to_gray (Image, Image, Image, Image…

日志OLAP:在SQL中使用UDF, lambda函数使用案例

场景 日志服务内置了20类SQL函数。面对用户复杂的业务场景&#xff0c;例如使用json来沉淀业务数据&#xff0c;普通的SQL函数可能就无法满足需求&#xff0c;需要一些用户自定义处理逻辑。为了处理json类的业务数据&#xff0c;我们可以采用把json展开成多行的形式进行统计分析…

瓶子个数计数halcon

文章目录处理要求处理方法一源码效果方法二源码效果博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 处理要求 查找纸箱内瓶子个数 处理方法一 源码 dev_clear_window () dev_open_window (0, 0, 640*1.5, 512*1.5, black, WindowHandle…