上一篇教程明河讲解了一些NodeJs的知识点，这一篇教程将给大家讲解前端方面的知识点。
Geolocation是html5中的主要内容，用于处理客户端的地理信息，特别在手持设备上有广泛的使用场景。
（PS:demo中虽然实现了位置定位，但不能随着你的移动，坐标也发生变化，借助NodeJs的socket.io模块即可实现。）
Geolocation兼容性还算不错，不算IE9以下，你懂的….
Geolocation的主要定位方式有如下几种：
（《html5高级程序设计》中有详细的论述。）
先通过 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()方法即可。
参数的含义如下：
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会添加 L全局变量，包含所有的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(); }