html5怎样实现信息抓取,HTML5获取定位简单方案

由来

一个客户提出一个需求，想在xiunobbs中实现，发帖时显示 定位信息，然后在查看时 可以实现，如果是Android或IOS端安装了百度地图APP的可以唤起，否则就和网页PC端的一样，直接跳转到网页版的百度地图并定位到改点。

简单实现步骤：

发帖时增加按钮，可以选择是否获取定位

将获取到的经纬度数值 通过 百度JavaScript API来逆向解析，得到省、市、县、街道等信息。

查看帖子时，将经纬度再次拼接成URI，供客户端唤起服务。

大致步骤如上吧，具体如何制作的xiunobbs插件这里就不谈了。

geolocation对象

该对象有三个方法：

注册一个位置改变监听器，每当设备位置改变时，返回一个 long 类型的该监听器的ID值。

取消由 watchPosition()注册的位置监听器。

增加按钮

这个不是本篇主要内容，也就一笔带过吧。

image.png

hook了post_message_after.htm 这个位置加入了

使用位置Secondary

获取当前定位

利用getCurrentPosition()方法来获取位置得到经纬度。

语法

navigator.geolocation.getCurrentPosition(success, error, options)

参数

success

成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数。

error 可选

获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数，这是一个可选项。

options 可选

于是简单写了下代码

$(".get-location").click(function () {

// $(this).preventDefault();

var options = {

enableHighAccuracy : true,

maximumAge : 1000

};

// alert('this is getLocation()');

if (navigator.geolocation) {

//浏览器支持geolocation

console.log('support');

$(".location-str").removeClass("d-none");

$(".location-str").text("正在获取中……")

navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

} else {

//浏览器不支持geolocation

alert('您的浏览器不支持地理位置定位');

}

return false;

});

onSuccess和onError分别如下

function onSuccess(position) {

// 用户位置字符串

var locationStr = "";

//返回用户位置

//经度

var longitude = position.coords.longitude;

//纬度

var latitude = position.coords.latitude;

$(".location-str").text('当前地址的经纬度：经度' + longitude + '，纬度' + latitude);

}

function onError(error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝");

break;

case 2:

alert("暂时获取不到位置信息");

break;

case 3:

alert("获取信息超时");

break;

case 4:

alert("未知错误");

break;

}

}

这样简单的就能获取到经纬度了。

结合百度地图逆向解析

它给出的示例代码如下

var map = new BMap.Map("l-map"); // 这个是显示的div class类名 如果不显示无需写

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// 创建地理编码实例

var myGeo = new BMap.Geocoder();

// 根据坐标得到地址描述

myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){

if (result){

alert(result.address);

}

});

image.png

image.png

完善一下之前的onSuccess函数

function onSuccess(position) {

// 用户位置字符串

var locationStr = "";

//返回用户位置

//经度

var longitude = position.coords.longitude;

//纬度

var latitude = position.coords.latitude;

$(".location-str").text('当前地址的经纬度：经度' + longitude + '，纬度' + latitude);

var point = new BMap.Point(longitude, latitude);

var gc = new BMap.Geocoder();

gc.getLocation(point, function(rs) {

locationStr = rs.address;

$(".location-str").text(locationStr);

$("#location").val(locationStr + "|" + longitude + "|" + latitude);

console.log($("#location").val());

});

}

将之前获取到的经纬度，传参进入，调用这个方法，然后拿到解析后的address地址内容。将id为location的这个内容赋值为address字符串内容。(这个是为了提交到后端，下次读取帖子时可以拿到。PS：这里得注意下XSS)

显示效果：

image.png

(PC端不准，还有其他因素，结果定位到洛杉矶了):)

点击唤起百度地图APP

简单的定位也拿到了，然后该显示了。

hook显示位

这里还是简单带过下显示的地方，hook了thread_plugin_before.htm这个点。

list($location_str,$lng,$lat) = explode('|',$first['location']);

// 网页版

$baidu_pc_map_url = 'http://api.map.baidu.com/geocoder?location='.$lat.','.$lng.'&output=html&src=webapp.baidu.openAPIdemo';

// 安卓端

$android_url = 'bdapp://map/geocoder?location='.$lat.','.$lng.'&src=andr.baidu.openAPIdemo';

// IOS端

$ios_url = 'baidumap://map/geocoder?location='.$lat.','.$lng.'&src=ios.baidu.openAPIdemo';

?>

href="<?php echo $baidu_pc_map_url;?>" style="text-decoration: none;color: #fff;" id="location_url"><?php echo $location_str;?>

下面的js操作是hook的thread_js.htm。

唤起应用

唤起的逻辑简单如下：

PC端：直接显示百度地图web地址

Mobile端：

Android端：Android的百度地图APP

IOS|iPhone|iPad端：iOS的百度地图APP

利用uri的反向地址解析来完成，从手册中可以查到三个分别是

http://api.map.baidu.com/geocoder 网页

bdapp://map/geocoder?location 安卓

baidumap://map/geocoder?location IOS

然后就是利用JavaScript来判断下：

var browser={

versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;

return {//移动终端浏览器版本信息

trident: u.indexOf('Trident') > -1, //IE内核

presto: u.indexOf('Presto') > -1, //opera内核

webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器

iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器

iPad: u.indexOf('iPad') > -1, //是否iPad

webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部

};

}(),

language:(navigator.browserLanguage || navigator.language).toLowerCase()

}

$("#location_url").click(function (event) {

event.preventDefault();

var web_scheme = "<?php echo $baidu_pc_map_url;?>";

var scheme = '';

if(browser.versions.mobile || browser.versions.ios || browser.versions.android ||

browser.versions.iPhone || browser.versions.iPad){

console.log('mobile');

if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {

scheme = "<?php echo $ios_url;?>";

}else if (browser.versions.android) {

scheme = "<?php echo $android_url;?>";

}

}else{

scheme = "<?php echo $baidu_pc_map_url;?>";

console.log('pc',scheme);

}

// 轮询判断能否唤起，如果不能唤起 则使用网页版

window.location.href = scheme;

var startTime = Date.now();

var count = 0;

var endTime = 0;

var t = setInterval(function () {

count += 1;

endTime = Date.now() - startTime;

if (endTime > 800) {

clearInterval(t);

}

if (count < 30) return;

if (!(document.hidden || document.webkitHidden)) {

window.location.href = web_scheme;

}

}, 20);

})

然后就可以唤起应用并显示标注了地图上的点。

Reference