HTML5地理位置與LBS應(yīng)用開發(fā)的方法

發(fā)布時間：2022-03-09 10:43:37 來源：億速云閱讀：144 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“HTML5地理位置與LBS應(yīng)用開發(fā)的方法”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5地理位置與LBS應(yīng)用開發(fā)的方法”文章能幫助大家解決問題。

1. LBS應(yīng)用開發(fā)示例

在5年前，我們不敢想象會有如此眾多的供應(yīng)商提供免費的電子地圖服務(wù)，而現(xiàn)在，開發(fā)者擁有眾多選擇：阿里云電子地圖，百度電子地圖，新浪電子地圖，谷歌電子地圖等。這里我們演示的是阿里云電子地圖。

下面表示一個典型的LBS服務(wù)，通過GPS，Wi-Fi或其他方式查找設(shè)備所在的位置信息，通過此信息，在方圓1000米的范圍內(nèi)查找所有的酒店，總共前10個酒店顯示在地圖上。

具體示例代碼如下所示。

<head>

</ script> <！-上面提到的是阿里云地圖->

<腳本類型= “ text / javascript” charset = “ utf-8” src = “ foropera.js” >

</ script>

</ head>

<body>

= “ helpme” 樣式= “不透明度：0.9;位置：絕對; z-index：1000;頂部：100px;左側(cè)：20px;顯示：無;背景顏色：＃333; -webkit-border-radius：15px;右側(cè)：20px;“ >

</ center>

</ div> <br />

</ center> <br />

</ div>

// <！

'helpme'）。樣式.display = 'none' ;

}

函數(shù)showhelp（）{

document.getElementById（'helpme'）。樣式.display = '' ;

}

// ]] >

</ script>

// <！[CDATA [

$（'+ window.innerWidth + “ px; height：” + window.innerHeight + “

px ”;

function func_control（）{

alert（'此處可以定制為某項功能'）;

}

Jla.require（“ Ali.Map.MapType.AliMobile”）; //加載手機地圖的功能

Jla.onReady（onLoad）;

函數(shù)onLoad（）{

$（'divLayer'）。style.top =（（window.innerHeight / 2）-20）+ “ px” ;

$（'divLayer'）.style.left =（（window.innerWidth / 2）-150）+ “ px” ;

$（'divLayer'）.style。

$（'divLayer'）.innerHTML = '正在加載地圖......' ;

var hasGeolocation = !!（navigator.geolocation）;

if（！hasGeolocation）{

alert（“瀏覽器不支持Geolocation”）;

}

var map，markers = [];

var map = new AliMap（“ mapDiv”）; //使用id為mapDiv的層創(chuàng)建一個地圖對象

AliEvent.addListener（map， “ click”，function（）{ //監(jiān)聽事件

alert（“有人放置了地圖?！保?

}）;

localStorage.wd = “ 0” ; //如果沒有獲取到任何地理坐標，則直接替換為0

localStorage.jd = “ 0” ;如果沒有獲取到任何地理坐標，則

直接替換為0 showmap（localStorage.wd，localStorage.jd，localStorage.cx）; //展示地圖

var geolocationOptions = {timeout：30000，enableHighAccuracy：true，maximumAge：5000};

$（'divLayer'）.innerHTML = '正在獲取坐標......' ;

navigator.geolocation.getCurrentPosition（geolocationSuccess，geolocationError，

geolocationOptions）;

function geolocationSuccess（position）{

alert（“北緯：” + position.coords.latitude + “，東經(jīng)：” + position.coords.longitude）;

//打開當(dāng)前的經(jīng)緯度坐標

localStorage.wd = position.coords.latitude;

localStorage.jd = position.coords.longitude;

localStorage.cx = position.coords.heading;

showmap（localStorage.wd，localStorage.jd，localStorage.cx）; //展示地圖

}

setInterval（function（）{

//每隔20秒重新刷新地圖

showmap（localStorage.wd，localStorage.jd，localStorage.cx）;

}，20000）;

function geolocationError（err）{

switch（err.code）{

case 1：

$（'divLayer'）.innerHTML = '坐標獲取被拒絕，地圖加載失敗' ;

休息;

情況2：

$（'divLayer'）。innerHTML = '連不上GPS衛(wèi)星或網(wǎng)絡(luò)斷了' ;

休息;

情況3：

$（'divLayer'）.innerHTML = ';

休息;

默認值：

$（'divLayer'）.innerHTML = '發(fā)生嚴重異常，請刷新頁面' ;

休息;

}

函數(shù)showmap（wd，jd，cx）{

$（'divLayer'）.innerHTML = '正在展示數(shù)據(jù)......' ;

//在該坐標處創(chuàng)建一個標記

var MAPMAP = new AliLatLng（localStorage.wd，localStorage.jd）;

if（cx === null）{

alert（'對不起，取不到當(dāng)前朝向'）;

}

yycontrol = new AliMapOverviewControl（{open：true}）; //創(chuàng)建一個鷹眼控件

map.addControl（yycontrol）; //將鷹眼控件添加到地圖

//設(shè)置調(diào)用的地圖類型為手機版地圖

map.setMapType（new（Jla.get（“ Ali.Map.MapType.AliMobile”））（））;

map.centerAndZoom（MAPMAP，14）; //定位地圖

search =新的AliLocalSearch（）; //設(shè)置搜索結(jié)果處理函數(shù)

AliEvent.addListener（search，“ searchcomplete”，onSearchComplete）;

AliEvent.addListener（search，“ searchexception ”，onSearchException）;

var search_keyword = “酒店” ;

var search_radius = 1000; //搜索

國會是1000米search.keyword = search_keyword; //設(shè)置關(guān)鍵字

search.pageSize = 10; //設(shè)置返回結(jié)果數(shù)量

search.center = map.getCenter（）;

search.execute（）; //開始搜索

marker = new AliMarker（MAPMAP）; //將標記添加到地圖

//創(chuàng)建事件監(jiān)視器，在MapMove函數(shù)

map.openInfoWindow（MAPMAP，'我的位置'，'<div>附近的藍點，是方圓

'+ search_radius +'米內(nèi)的'+ search_keyword +' < \ / div> '）;

var icons = [

newAliIcon（“ icon1.gif”，{x：16，y：27}，{x：8，y：27}），

newAliIcon（“ icon2.png”，{x：23，y：29} ，{x：13，y：14}），

newAliIcon（“ icon3.png”，{x：49，y：59}，{x：24，y：56}）

]];

marker.setIcon（icons [1]）;

map.addOverlay（marker）;

橢圓形=新

AliOvalOverlay（map.getProjection（）。getSquare（MAPMAP，search_

radius），{editSymbolCtl：128}）; //以中心為中心，3000米為直徑的圓

map.addOverlay（oval）;

橢圓形。開始編輯（{keepRatio：true}）;

橢圓形.endEditting（{keepRatio：true}）;

函數(shù)onSearchException（exception）{

alert（exception.message）;

}

函數(shù)onSearchComplete（）{ //處理搜索結(jié)果

變量標記，resultDiv = document.getElementById（“ lsResultDiv”）;

AliEvent.deposeNode（resultDiv，true）;

while（marker = markers.pop（））{

map.removeOverlay（marker）;

}

for（var i = 0; i < search.points.length; i++）{

var poi = search.points [ i ];

標記=新AliMarker（poi.latlng，{標題：POI名稱}）;

映射.addOverlay（marker）;

//將標記的信息浮窗內(nèi)容記錄下來

marker._desc = “我是第” +（i + 1）+ “個” + search_keyword;

AliEvent.bind（marker， “ click” ，marker，onMarkerclick）;

markers.push（marker）;

}

函數(shù)onMarkerclick（）{

//確保信息浮窗在視圖范圍內(nèi)

無功 infowin = this.openInfoWindow（此。標題，this._desc）;

infowin.moveIntoView（）;

}

$（'divLayer'）.innerHTML = “” ;

$（'divLayer'）。樣式.top = “ 0px” ;

$（'divLayer'）。樣式.left = “ 0px” ;

$（'divLayer'）。風(fēng)格。width = “ 0px” ;

$（'divLayer'）。樣式.display = 'none' ;

}

// ]] >

</ script>

</ body>

關(guān)于“HTML5地理位置與LBS應(yīng)用開發(fā)的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細節(jié)

HTML5地理位置與LBS應(yīng)用開發(fā)的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽