由來

一個(gè)客戶提出一個(gè)需求，想在xiunobbs中實(shí)現(xiàn)，發(fā)帖時(shí)顯示 定位信息，然后在查看時(shí) 可以實(shí)現(xiàn)，如果是Android或IOS端安裝了百度地圖APP的可以喚起，否則就和網(wǎng)頁P(yáng)C端的一樣，直接跳轉(zhuǎn)到網(wǎng)頁版的百度地圖并定位到改點(diǎn)。

簡單實(shí)現(xiàn)步驟：

發(fā)帖時(shí)增加按鈕，可以選擇是否獲取定位

將獲取到的經(jīng)緯度數(shù)值 通過 百度JavaScript API來逆向解析，得到省、市、縣、街道等信息。

查看帖子時(shí)，將經(jīng)緯度再次拼接成URI，供客戶端喚起服務(wù)。

大致步驟如上吧，具體如何制作的xiunobbs插件這里就不談了。

geolocation對(duì)象

該對(duì)象有三個(gè)方法：

注冊(cè)一個(gè)位置改變監(jiān)聽器，每當(dāng)設(shè)備位置改變時(shí)，返回一個(gè) long 類型的該監(jiān)聽器的ID值。

取消由 watchPosition()注冊(cè)的位置監(jiān)聽器。

增加按鈕

這個(gè)不是本篇主要內(nèi)容，也就一筆帶過吧。

image.png

hook了post_message_after.htm 這個(gè)位置加入了

使用位置Secondary

獲取當(dāng)前定位

利用getCurrentPosition()方法來獲取位置得到經(jīng)緯度。

語法

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

參數(shù)

success

成功得到位置信息時(shí)的回調(diào)函數(shù)，使用Position 對(duì)象作為唯一的參數(shù)。

error 可選

獲取位置信息失敗時(shí)的回調(diào)函數(shù)，使用 PositionError 對(duì)象作為唯一的參數(shù)，這是一個(gè)可選項(xiàng)。

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 = "";

//返回用戶位置

//經(jīng)度

var longitude = position.coords.longitude;

//緯度

var latitude = position.coords.latitude;

$(".location-str").text('當(dāng)前地址的經(jīng)緯度：經(jīng)度' + longitude + '，緯度' + latitude);

}

function onError(error) {

switch (error.code) {

case 1:

alert("位置服務(wù)被拒絕");

break;

case 2:

alert("暫時(shí)獲取不到位置信息");

break;

case 3:

alert("獲取信息超時(shí)");

break;

case 4:

alert("未知錯(cuò)誤");

break;

}

}

這樣簡單的就能獲取到經(jīng)緯度了。

結(jié)合百度地圖逆向解析

它給出的示例代碼如下

var map = new BMap.Map("l-map"); // 這個(gè)是顯示的div class類名 如果不顯示無需寫

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

// 創(chuàng)建地理編碼實(shí)例

var myGeo = new BMap.Geocoder();

// 根據(jù)坐標(biāo)得到地址描述

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

if (result){

alert(result.address);

}

});

image.png

image.png

完善一下之前的onSuccess函數(shù)

function onSuccess(position) {

// 用戶位置字符串

var locationStr = "";

//返回用戶位置

//經(jīng)度

var longitude = position.coords.longitude;

//緯度

var latitude = position.coords.latitude;

$(".location-str").text('當(dāng)前地址的經(jīng)緯度：經(jīng)度' + 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());

});

}

將之前獲取到的經(jīng)緯度，傳參進(jìn)入，調(diào)用這個(gè)方法，然后拿到解析后的address地址內(nèi)容。將id為location的這個(gè)內(nèi)容賦值為address字符串內(nèi)容。(這個(gè)是為了提交到后端，下次讀取帖子時(shí)可以拿到。PS：這里得注意下XSS)

顯示效果：

image.png

(PC端不準(zhǔn)，還有其他因素，結(jié)果定位到洛杉磯了):)

點(diǎn)擊喚起百度地圖APP

簡單的定位也拿到了，然后該顯示了。

hook顯示位

這里還是簡單帶過下顯示的地方，hook了thread_plugin_before.htm這個(gè)點(diǎn)。

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

// 網(wǎng)頁版

$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。

喚起應(yīng)用

喚起的邏輯簡單如下：

PC端：直接顯示百度地圖web地址

Mobile端：

Android端：Android的百度地圖APP

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

利用uri的反向地址解析來完成，從手冊(cè)中可以查到三個(gè)分別是

http://api.map.baidu.com/geocoder 網(wǎng)頁

bdapp://map/geocoder?location 安卓

baidumap://map/geocoder?location IOS

然后就是利用JavaScript來判斷下：

var browser={

versions:function(){

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

return {//移動(dòng)終端瀏覽器版本信息

trident: u.indexOf('Trident') > -1, //IE內(nèi)核

presto: u.indexOf('Presto') > -1, //opera內(nèi)核

webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核

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

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端

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應(yīng)該程序，沒有頭部與底部

};

}(),

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);

}

// 輪詢判斷能否喚起，如果不能喚起 則使用網(wǎng)頁版

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);

})

然后就可以喚起應(yīng)用并顯示標(biāo)注了地圖上的點(diǎn)。

Reference

總結(jié)

以上是生活随笔為你收集整理的html5怎样实现信息抓取,HTML5获取定位简单方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。