Geolocation和Web Sockets基于NodeJs的实战(2)

标签: javascript NodeJs Geolocation | 发表时间:2013-01-16 15:57 | 作者:明河
出处:http://www.36ria.com

上一篇教程明河讲解了一些NodeJs的知识点,这一篇教程将给大家讲解前端方面的知识点。

Geolocation

Geolocation是html5中的主要内容,用于处理客户端的地理信息,特别在手持设备上有广泛的使用场景。

Geolocation的简单的demo

(PS:demo中虽然实现了位置定位,但不能随着你的移动,坐标也发生变化,借助NodeJs的socket.io模块即可实现。)

Geolocation的兼容性情况

Geolocation兼容性还算不错,不算IE9以下,你懂的….

Geolocation的地理信息精度问题

Geolocation的主要定位方式有如下几种:

  • ip地址:也是web端最常用的方式,精度基本符合日常使用场景,有时可能出现定位到ISP机房的情况
  • GPS :常见于移动设备,最为精确,定位需时较长。
  • WiFi基站的mac地址:适用范围窄
  • GSM或CDMA基站:精度一般

(《html5高级程序设计》中有详细的论述。)

Geolocation API的使用

先通过 navigator.geolocation的存在性,判断浏览器是否支持Geolocation;

    /**
     * 浏览器是否支持 geolocation api
     * @return Boolean
     */
    function isSupportGeo(){
        var isSupport = false;
        if (navigator.geolocation) {
            isSupport = true;
        } else {
            isSupport = false;
            console.log('浏览器不支持geolocation');
        }
        return isSupport;
    }

如何获取客户端当前地理位置?

navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]),使用 getCurrentPosition()方法即可。

参数的含义如下:

  • successCallback:获取定位成功时执行的回调函数
  • errorCallback:可选,定位失败时执行的回调函数
  • positionOptions:可选,拥有三个可配置属性{enableHighAccuracy:boolean , timeout:long , maximumAge:long},用于控制定位精度,一般不用配置

demo代码如下:

        //获取用户当前位置
	if (isSupportGeo) {
		navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true });
	} else {
		$('.map').text('Your browser is out of fashion, there\'s no geolocation!');
	}

positionSuccess回调带有position数据,核心的数据有longitude(经度)、latitude(维度)、accuracy(精确度)。

来看下positionSuccess这个回调函数代码:

    /**
     * 获取地理信息成功后执行的回调函数
     * @param position 位置信息
     */
     function positionSuccess(position) {
                //纬度
		var lat = position.coords.latitude;
                //经度
	 	var lng = position.coords.longitude;
                 //以米为单位的经度和纬度的精确度
		var acr = position.coords.accuracy;
      }

想要把坐标定位到地图上还需要使用 leaflet的API(google map也是可以的)。

leaflet

leaflet是相当不错的地图库,使用起来非常简单。

在页面中引入leaflet.js


 

leaflet会添加 L全局变量,包含所有的API。

leaflet api的使用

点此进入API文档。内容很多,本文只用到核心的几个方法。

使用 L.marker()定位坐标

     function positionSuccess(position) {
                //纬度
		var lat = position.coords.latitude;
                //经度
	 	var lng = position.coords.longitude;
                 //以米为单位的经度和纬度的精确度
		var acr = position.coords.accuracy;

		// 定位用户坐标
		var userMarker = L.marker([lat, lng], {
			icon: redIcon
		});

		// demo
		// userMarker = L.marker([51.45, 30.050], { icon: redIcon });
      }

L.marker()第一个参数为坐标,第二个参数可选,demo中,我们自定义了定位坐标时使用的icon样式:

定义icon,比较麻烦,需要使用 L.Icon接口。

	// 自定义坐标定位样式
	var tinyIcon = L.Icon.extend({
		options: {
			shadowUrl: '../assets/marker-shadow.png',
			iconSize: [25, 39],
			iconAnchor:   [12, 36],
			shadowSize: [41, 41],
			shadowAnchor: [12, 38],
			popupAnchor: [0, -30]
		}
	});
	var redIcon = new tinyIcon({ iconUrl: '../assets/marker-red.png' });

通过 iconUrl配置icon图片的位置。

接下来加载leaflet的地图,使用 map()方法。

		// 加载地图
		map = L.map('map');

第一个参数为地图容器id,对应:

  

map()是最核心的方法,拥有丰富的配置项,详细可以看 文档,比如:

var map = L.map('map', {
    //地图中心点配置
    center: [51.505, -0.09],
    //放大倍数
    zoom: 13
});

使用 L.tileLayer()配置地图瓦片图层的图片地址。

一张地图并不是完整的一张图片,而是有多张图片拼接而成的,我们将这些小图片称为瓦片图层,即 tileLayer

L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, detectRetina: true }).addTo(map);

重点解释下 http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png,这个路径其实是图片路径模版,可以通过调试工具看下地图图层的路径:

leaflet会自动将 {s}替换成a、b或c等组成2级域名, {z}为放大等级, {x}{y}为坐标。

接下来配置地图容器填充满整个世界。(容器内显示世界地图)

map.fitWorld();

将定位坐标添加到地图内:

		userMarker.addTo(map);

leaflet可以给定位坐标icon添加个弹出层,显示指定的内容:

		userMarker.bindPopup('你在这里,你的id是 ' + userId).openPopup();

userId为随机id。

完整的地图定位代码

html部分代码如下:

  

js部分代码如下:

	// 自定义坐标定位样式
	var tinyIcon = L.Icon.extend({
		options: {
			shadowUrl: '../assets/marker-shadow.png',
			iconSize: [25, 39],
			iconAnchor:   [12, 36],
			shadowSize: [41, 41],
			shadowAnchor: [12, 38],
			popupAnchor: [0, -30]
		}
	});
	var redIcon = new tinyIcon({ iconUrl: '../assets/marker-red.png' });
    /**
     * 浏览器是否支持 geolocation api
     * @return Boolean
     */
    function isSupportGeo(){
        var isSupport = false;
        if (navigator.geolocation) {
            isSupport = true;
        } else {
            isSupport = false;
            console.log('浏览器不支持geolocation');
        }
        return isSupport;
    }
    //获取用户当前位置
	if (isSupportGeo) {
		navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true });
	} else {
		$('.map').text('Your browser is out of fashion, there\'s no geolocation!');
	}
    /**
     * 获取地理信息成功后执行的回调函数
     * @param position 位置信息
     */
	function positionSuccess(position) {
        //纬度
		var lat = position.coords.latitude;
        //经度
		var lng = position.coords.longitude;
        //以米为单位的经度和纬度的精确度
		var acr = position.coords.accuracy;

		// 定位用户坐标
		var userMarker = L.marker([lat, lng], {
			icon: redIcon
		});
		// demo
		// userMarker = L.marker([51.45, 30.050], { icon: redIcon });

		// 加载地图
		map = L.map('map');

		// 配置地图瓦片图层的图片地址
		L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, detectRetina: true }).addTo(map);

		// 配置地图容器填充满整个世界
		map.fitWorld();

		userMarker.addTo(map);
		userMarker.bindPopup('你在这里,你的id是 ' + userId).openPopup();
	}

相关 [geolocation web sockets] 推荐:

Geolocation和Web Sockets基于NodeJs的实战(2)

- - ria之家--RIA三部曲:jquery、ext、flex
上一篇教程明河讲解了一些NodeJs的知识点,这一篇教程将给大家讲解前端方面的知识点. Geolocation是html5中的主要内容,用于处理客户端的地理信息,特别在手持设备上有广泛的使用场景. Geolocation的简单的demo. (PS:demo中虽然实现了位置定位,但不能随着你的移动,坐标也发生变化,借助NodeJs的socket.io模块即可实现.

跨浏览器获取 Geolocation

- - 幸福收藏夹
年末,这一年的工作都差不多搞完了. 因为下一年的目标是 HTML5 应用,所以在做一些小尝试. 距离 第一次在支付宝分享 HTML5,已经有一年半了,时间好快,就这么过去了. 前几天和同事聊到可能可以做个基于 LBS 的服务,回到家里就尝试了一下 HTML5 的 Geolocation API. 翻开一年前写的文档,很快就熟悉起来.

html5 Geolocation 地理定位

- - On The Way
一、Geolocation 概述. Geolocation API 在网页中使用 geolocation 对象向javaScript 提供经度和纬度. 利用 geolocation 对象,可以获取用户位置和跟踪用户位置的变化. 1.1 Geolocation API 获取地理位置的方式. IP地址 - 任何地方可用,不精确.

Web未死

- Sinan - GeekPark 捕风捉影
App的极限已经浮现,而Web则是突破此极限,推动下一个数字时代革命的起点. 距离美国《连线》杂志发表《Web已死,互联网永生》这篇文章还不到一年的时间,业界为Web平反的声音渐起. 2010年1月,苹果发布iPad,紧随其后在6月又发布了iPhone4. 没有人质疑过苹果的iTunes+App的商业模式,App可谓如日中天.

web的演变

- 酿泉 - 前端观察
这是一个基于GAE的项目,有mgmt design、GOOD、Hyperakt和Vizzuality开发,也有Google chrome团队的参与,记录了浏览器与互联网技术的演变. 不多介绍,直接去看看吧:Evolution Of Web. 值得一提的是,这个项目的代码很不错,值得学习一下.

Web Service入门

- - 博客 - 伯乐在线
本文来自文章作者 @Jeremy黄国华 的投稿. 伯乐在线也欢迎其他朋友投稿,投稿时记得留下您的新浪微博账号哦~. 目前对Web Service没有统一的定义,定义一:Web Service是自包含的、模块化的应用程序,它可以在Web中被描述、发布、查找以及调用. 定义二:Web Service是基于网络的、分布式的模块化组件,它执行特定的任务,遵守具体的技术规范,这些规范使得Web Service能与其他兼任的组件进行操作.

Web Apps来袭

- - HTML5研究小组
如同历史上任何一次互联网基础标准的变化都会在随后几年中带来应用创新的大爆发一样,当HTML5在2011年逐渐被主流厂商所接受之后,围绕Web Apps领域的创新风暴正山雨欲来. 2012年1月12日,老牌传媒集团《金融时报》(Financial Times,以下简称FT)宣布收购为其开发移动Web App的研发公司Assanka ,这样,FT将不再以外包的形式雇佣Assanka为其打造移动Web App,而可以直接让它在内部进行开发.

Google 的 Web Desinger

- - 极客公园-GeekPark
[核心提示]Google 的免费 Web 设计工具虽然现在主要目的是为广告设计,今后会不会成为 Chrome 应用的开发工具. 听到 Google 推出了一个名为 Google Web Designer 的网页设计还有点惊讶. 虽然 Google 是 Web 技术的大力倡导者,毕竟自己严重依赖这个平台,但市面上相关的产品太多了,从专业的开发工具到小白的所见即所得软件数不胜数,还有 Adobe 这个专业玩家.

Chrome 的 Web Intents 会改变 Web 吗?

- hailin - 爱范儿 · Beats of Bits
2011年8月4日,Chrome 团队宣布将支持一个新的技术—— Web Intents. 这个技术未来可能会极大的影响网络应用和浏览器. 什么是 Web Intents. 如果您用过 Android 手机可能就会对这个技术有所了解. Android Intents 可以让两个独立的程序之前通信互相,神奇的是这两个程序中的任何一个程序可能不知道它在和谁通信.