2022-08-05 分類: 手機網(wǎng)站建設(shè)
隨著移動互聯(lián)網(wǎng)時代的到來,很多的成都網(wǎng)站建設(shè)客戶都開始走向手機網(wǎng)站建設(shè)方向發(fā)展,通過手機網(wǎng)站用戶可以隨時定位自己的位置,并查看到自己附近的商家和其他想要查找的信息。手機網(wǎng)站建設(shè)也隨之越來越受到互聯(lián)網(wǎng)公司的重視,但是由于手機端網(wǎng)站建設(shè)和PC端的網(wǎng)站建設(shè),在技術(shù)和實現(xiàn)方式上有所不同,所以,很多成都網(wǎng)站建設(shè)公司的技術(shù)人員對這塊還很生疏,最近由于工作的需要,著手去研究一個手機網(wǎng)站,順便在這里和大家分享一下,關(guān)于手機網(wǎng)站建設(shè)所注意的事項,以及其主要功能的實現(xiàn)方法和思路。
需要建設(shè)的網(wǎng)站的主要功能:
Ⅰ、用戶可以根據(jù)定位自己所在的位置,查看離自己最近的商家所發(fā)布的優(yōu)惠信息。
Ⅱ、用戶查看商家詳情頁面的時候,可以直接直觀的通過谷歌地圖的坐標(biāo)形式,一眼看到該商家所在位置。
Ⅲ、用戶可以查看自己所在位置和周圍所有商家的實際距離有多遠(yuǎn)。
Ⅳ、用戶可以通過分類查找,篩選查找,以及根據(jù)不同城市查找自己想要的信息。
以上是這個網(wǎng)站的主要功能,大家可以看出,該網(wǎng)站最主要的功能就是用戶可以實現(xiàn)手機定位,并很快的找到該商家。大家都知道,PC端的網(wǎng)站是無法現(xiàn)實定位服務(wù)的,更不用說距離某個商家有多遠(yuǎn)了。直接進入正題,實現(xiàn)這些功能的方法。
成都網(wǎng)站建設(shè)中手機網(wǎng)站建設(shè)定位并實現(xiàn)地圖標(biāo)記和附近商家實現(xiàn)方式" src="/upload/pic18/201401111217002678.jpg" />
一、用戶如何通過網(wǎng)站定位自己的位置首先需要了解的是,網(wǎng)站定位服務(wù)需要用到HTML5的寫法,并且這點是一定要注意的,關(guān)于HTML5兼容性的問題,可以不用考慮,因為目前手機上的所有瀏覽器都是支持HTML5寫法的,區(qū)分HTML5和HTML4的一點很簡單,就是在網(wǎng)站源碼的開頭部分,HTML5是<!DOCTYPE html>,就這么一行話,不像是HTML4一樣那么長。好了,指定完網(wǎng)站代碼的編碼格式之后,就需要使用到HTML5的內(nèi)置定位函數(shù),也就是navigator函數(shù),具體的代碼,如下:
navigator.geolocation.getCurrentPosition(showPosition,showError);
showPosition:是指的執(zhí)行該函數(shù)的回調(diào)函數(shù),也就是說所有的執(zhí)行條件都在這里面了。
showError:是指該函數(shù)執(zhí)行錯誤之后,是由于什么原因錯誤的。
showPosition函數(shù)的代碼:
function showPosition(position)
{
var lat = position.coords.latitude; //獲得當(dāng)前位置的緯度
var lng = position.coords.longitude; //獲得當(dāng)前位置的經(jīng)度
alert( "您所在的位置: 緯度" + lat + ",經(jīng)度" + lng ); //輸出當(dāng)前位置的經(jīng)緯度信息
if(typeof position.address !== "undefined"){
var country = position.address.country;
var province = position.address.region;
var city = position.address.city;
alert(' 您位于 ' + country + province + '省' + city +'市');
}
}
showError函數(shù)的代碼:
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: //瀏覽器不支持Geolocation函數(shù)
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE: //用戶不允許使用定位服務(wù)
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT: //定位服務(wù)超時
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR: //未知錯誤
x.innerHTML="An unknown error occurred."
break;
}
}
通過以上代碼,用手機瀏覽器運行,就能夠看到當(dāng)前所在的經(jīng)緯度信息了,如下圖所示。
二、獲得當(dāng)前經(jīng)緯度信息之后后,如何在谷歌地圖上標(biāo)注出該位置知道準(zhǔn)確的經(jīng)緯度之后,我們只需要調(diào)用谷歌地圖的一個API接口就可以,然后通過創(chuàng)建所現(xiàn)在地圖的大小,并通過地圖API的接口,標(biāo)注當(dāng)前位置,具體代碼如下:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> //引用谷歌地圖API文件
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
加入以上代碼,在取得準(zhǔn)確經(jīng)緯度之后,就能夠很輕松的在谷歌地圖上自動標(biāo)記商家位置了,如下圖:
三、如何計算當(dāng)前位置和指定商家的距離是多少計算位置要用到的就是PHP代碼了,知道了兩點的經(jīng)緯度之后,通過一個計算公式很容易就能算出兩點之間的距離來,具體代碼如下:
<?php
function rad($d)
{
return $d * 3.1415926535898 / 180.0;
}
function getdistance($lng1,$lat1,$lng2,$lat2)//根據(jù)經(jīng)緯度計算距離
{
//將角度轉(zhuǎn)為狐度
$radLat1=deg2rad($lat1);
$radLat2=deg2rad($lat2);
$radLng1=deg2rad($lng1);
$radLng2=deg2rad($lng2);
$a=$radLat1-$radLat2;//兩緯度之差,緯度<90
$b=$radLng1-$radLng2;//兩經(jīng)度之差緯度<180
$s=2*asin(sqrt(pow(sin($a/2),2)+cos($radLat1)*cos($radLat2)*pow(sin($b/2),2)))*6378.137;
return $s;
}
echo GetDistance($lat1, $lng1, 36.684555, 117.064682);
?>
綜合以上代碼,最終完成當(dāng)前位置定位,已經(jīng)谷歌地圖顯示和當(dāng)前位置距離指定商家的距離是多少。然后通過實際的需要,對網(wǎng)站的數(shù)據(jù)庫和結(jié)構(gòu)進行規(guī)劃,最終完成一個可以實現(xiàn)手機定位服務(wù)的手機網(wǎng)站。成都網(wǎng)站建設(shè)行業(yè)也逐漸從電腦的PC端,逐漸轉(zhuǎn)換為手機網(wǎng)站的建設(shè),隨著手機客戶端和智能手機的興起,手機網(wǎng)站建設(shè)也會有越來越多的公司去做,相對于手機網(wǎng)站和電腦網(wǎng)站來說,都是各有各的好處,我們之后不斷的提升自己的網(wǎng)站建設(shè)水平,才能在以后的網(wǎng)站建設(shè)市場逐漸站穩(wěn)腳步,持續(xù)而穩(wěn)定的發(fā)展下去。
注:請使用手機瀏覽器打開以上網(wǎng)址,電腦訪問可能會存在兼容性問題。
當(dāng)前名稱:成都網(wǎng)站建設(shè)中手機網(wǎng)站建設(shè)定位并實現(xiàn)地圖標(biāo)記和附近商家實現(xiàn)方式
當(dāng)前地址:http://redsoil1982.com.cn/news14/185464.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容