由來

一個客戶提出一個需求，想在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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。