网页地图定位,web地图定位功能

　　前言：

　　我看了很多技术大牛和相关博客，不知道他们为什么这么少的不想提或者用HTML5。我个人根据一点经验总结了两个原因：

　　首先是服务商，因为HTML5的定位是google提供的，而且因为google屏蔽了大陆，所以不支持定位功能，这是主要原因。

　　其次，HTML5本身的地理位置表现不佳，与第三方工具如百度地图不是一个级别的。在真正的项目开发中，很少使用native HTML5自身的地理位置，这是次要原因！

　　一、HTML5的新特性--地理定位由于地理定位是HTML5的新特性，我们还需要学习和掌握相关的API，学习如何使用地理定位。

　　先学点常识吧。

　　新学期Geolocation:

　　用于获取当前浏览器的地理坐标，从而提供LBS(基于位置的服务)。比如饿了么送餐、滴滴打车、高德导航等软件都使用LBS，包括以下数据：

　　经度：经度

　　纬度：纬度

　　海拔：海拔

　　速度：速度

　　使用平台分为移动端和PC端：

　　(1)手机浏览器：

　　先试着用内置的GPS数据3354精度以米为单位，再用手机基站号反推出对应的地理位置3354。定位精度以千米为单位。

　　(2)PC浏览器：

　　通过电脑的IP地址反向查询——精度以公里为单位

　　题目：那么我们到底怎么样从HTML5中获取定位信息呢？首先我们在浏览器中按F12打开控制台，输入window.navigator.geolocation查看定位信息！

　　我们可以看到定位信息的方法主要有三种，它们的含义分别是：

　　GetCurrentPosition: fn (succ，err)//获取当前定位数据，其中包含回调函数watchPosition: fn //监测定位数据clearWatch: fn //清除定位监测。现在我们知道了如何在HTML5文件中使用地理定位，我们使用开发工具来创建一个HTML文件和一个按钮。点击按钮，定位信息会显示在后台！

　　！doctype html html headlang= en meta charset= UTF-8 title/title/headbydy button ID= BTN Get my positioning data/button script BTN . onclick=function(){//点击按钮时触发navigator . geolocation . getcurrentposition(succcb，errcb)；函数succCB(pos){ //成功获取回调函数！Console.log(成功获取定位数据)；Console.log(纬度： pos.coords .经度)；Console.log(经度：位置坐标.纬度)；console . log( height: pos . coords . altitude)；console . log( speed: pos . coords . speed)；}函数errCB(err){ //获取失败的回调函数！Console.log(未能获取定位数据)；console . log(err . message)；//输出失败的信息或原因！} }/脚本/正文/html

　　如图，点击按钮，成功获取定位数据，但是由于PC端的原因，高度和速度为空，所以我们只要记住一个方法就可以获取HTML5中的地理定位！

　　navigator . geolocation . getcurrentposition(function(pos){ console . log(定位数据获取成功))；//pos.coords.longitude.}，function (err) {console.log(定位数据采集失败)；//err . code err . message })二、使用第三方工具--百度地图

　　正如我在前言中提到的，百度地图是用来在项目和很多手机应用中为用户提供位置信息的。那么我们如何在自己的项目中使用百度地图呢？

　　首先我们要知道，百度地图的源代码是不会提供给大家下载的。这涉及到公司的利益，了解的人不用多说。不过百度还是有良心的公司，可以注册开发者账号开发使用！

　　使用步骤：

　　首先在官网打开http://lbsyun.baidu.com/，然后拉到最下面：

　　可以看到，百度地图可以用于web开发、Android开发、ios开发。这里我们用web开发，点击JavaScript API。

　　网站：http://lbsyun.baidu.com/index.php? title=js popular

　　我们可以在API中展示很多案例和函数。要使用百度地图，首先要获取密钥！

　　稍后我会解释密钥是什么。先点击进入页面。如果弹出登录界面，则登录。登录点击注册开发者账号(因为我是最近注册的，所以这里不能给你看，需要你自己操作)。输入相关手机和邮箱，然后在邮箱里验证。验证成功后，点击创建应用，出现如下界面：

　　请随意填写姓名。

　　应用类型的选择-浏览器端

　　Referer白名单：指的是谁可以访问你的应用，通过什么方式访问。在这里填写一个星号 * ，这意味着所有人都可以访问它，因为它可以只是为了测试而做。以后项目用的话还会有相关的加密方法等等！然后点击提交完成创建！

　　创建应用程序后，将出现以下界面：

　　这里会显示刚创建的应用号、应用名和最重要的访问应用代码，也就是前面提到的键！

　　然后拿到钥匙后，我们回到了主页http://lbsyun.baidu.com/index.php? title=js popular

　　点击左边的开发指南，可以看到相关API的用法和案例！这个API是边肖看到的，所以API里没有废话。

　　写的很详细，也很好理解，因为太多了。下面是一些主要用法！

　　让我们创建一个新的HTML文件，并将上面的代码复制到HTML文件中。

　　！DOCTYPE html html head meta charset= UTF-8 /script type= text/JavaScript src= http://API . map . Baidu . com/API？v=2.0 AK=JRB piu 6 JCB psxgvdqxac 0……/版本2.0在src= 3358api.map.baidu.com/api? V=2.0 AK=你的密钥//如何引用//v1.4及之前版本：src= 3358api.map.baidu.com/api? V=1.4 key=你的密钥回调=初始化/script style # container { width:800 px；高度：500px} /style /head body h1使用百度地图/H1 div id= container /div script type= text/JavaScript //创建地图实例，避免与Map重名，所以使用bmap . mapvar Map=new Map . Map( container )；//创建点坐标var point=new map . point(113.946317，22.549008)；//初始化地图，设置中心点坐标和地图级别1~18 map.centerAndZoom(point，18)；//鼠标滚动，地图缩放map . enablescrolwheelzoom(true)；//添加地图控件map . Add control(new map . navigation control())；map.addControl(新的BMap。overview mapcontrol())；map.addControl(新的BMap。scale control())；map.addControl(新的BMap。maptype control())；//添加地图标注var marker=map . Add overlay(new map . marker(point))；/script/body/html使用百度地图：

　　好了，我们成功地在HTML文件中使用了百度地图，现在我们可以像在http://map.baidu.com一样使用百度地图了！

　　相关功能描述：

　　script src= http://API . map . Baidu . com/API？V=2.0ak=你的网站在百度地图中应用的访问密钥/script在ak中输入你刚刚得到的一长串密钥来引用百度地图！

　　创建地图实例-必需。

　　var map=新的BMap。地图(“容器”)；

　　创建一个指定点，你的经纬度信息！如果不知道，可以用之前的。

　　获取纬度和经度的navigator . geolocation . getcurrentpose方法-必需的。

　　var point=新的BMap。点(116.300982，39.915907)；

　　以指定点为中心显示的地图数字17是指等级，可分为1~18级。等级越小，地图的查看范围越大。层次越大，观看范围越大。可以自己测试不同关卡显示的地图效果！-必需的。

　　map.centerAndZoom(point，17)；

　　地图可以用鼠标自由缩放-可选。

　　map . enablescrollwheelzoom(true)；

　　地图显示控制——效果自己测试，这里不是主要功能，不再解释——可选。

　　map.addControl(新的BMap。navigation control())；map.addControl(新的BMap。overview mapcontrol())；map.addControl(新的BMap。scale control())；map.addControl(新的BMap。maptype control())；在地图上显示注记(annotation )-可选

　　var marker=map.addOverlay(新BMap。标记(点))；

　　好了，第三方百度地图到此为止。有很多有趣的函数可以自己使用，所以方法和参数可以在API中找到！

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。