HTML5地理位置與LBS應用開發的方法

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

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

1. LBS應用開發示例

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

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

具體示例代碼如下所示。

<head>

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

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

</ script>

</ head>

<body>

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

</ center>

</ div> <br />

</ center> <br />

</ div>

// <！

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

}

函數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）;

函數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的層創建一個地圖對象

AliEvent.addListener（map， “ click”，function（）{ //監聽事件

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 + “，東經：” + position.coords.longitude）;

//打開當前的經緯度坐標

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衛星或網絡斷了' ;

休息;

情況3：

$（'divLayer'）.innerHTML = ';

休息;

默認值：

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

休息;

}

函數showmap（wd，jd，cx）{

$（'divLayer'）.innerHTML = '正在展示數據......' ;

//在該坐標處創建一個標記

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

if（cx === null）{

alert（'對不起，取不到當前朝向'）;

}

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

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

//設置調用的地圖類型為手機版地圖

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

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

search =新的AliLocalSearch（）; //設置搜索結果處理函數

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

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

var search_keyword = “酒店” ;

var search_radius = 1000; //搜索

國會是1000米search.keyword = search_keyword; //設置關鍵字

search.pageSize = 10; //設置返回結果數量

search.center = map.getCenter（）;

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

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

//創建事件監視器，在MapMove函數

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

'+ search_radius +'米內的'+ 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}）;

函數onSearchException（exception）{

alert（exception.message）;

}

函數onSearchComplete（）{ //處理搜索結果

變量標記，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）;

//將標記的信息浮窗內容記錄下來

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

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

markers.push（marker）;

}

函數onMarkerclick（）{

//確保信息浮窗在視圖范圍內

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

infowin.moveIntoView（）;

}

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

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

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

$（'divLayer'）。風格。width = “ 0px” ;

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

}

// ]] >

</ script>

</ body>

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

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

HTML5地理位置與LBS應用開發的方法

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

HTML5地理位置與LBS應用開發的方法

猜你喜歡

最新資訊

相關推薦

相關標簽