成都網(wǎng)站建設(shè)中手機(jī)網(wǎng)站建設(shè)定位并實(shí)現(xiàn)地圖標(biāo)記和附近商家實(shí)現(xiàn)方式

2022-08-05 分類(lèi)：手機(jī)網(wǎng)站建設(shè)

隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái)，很多的成都網(wǎng)站建設(shè)客戶(hù)都開(kāi)始走向手機(jī)網(wǎng)站建設(shè)方向發(fā)展，通過(guò)手機(jī)網(wǎng)站用戶(hù)可以隨時(shí)定位自己的位置，并查看到自己附近的商家和其他想要查找的信息。手機(jī)網(wǎng)站建設(shè)也隨之越來(lái)越受到互聯(lián)網(wǎng)公司的重視，但是由于手機(jī)端網(wǎng)站建設(shè)和PC端的網(wǎng)站建設(shè)，在技術(shù)和實(shí)現(xiàn)方式上有所不同，所以，很多成都網(wǎng)站建設(shè)公司的技術(shù)人員對(duì)這塊還很生疏，最近由于工作的需要，著手去研究一個(gè)手機(jī)網(wǎng)站，順便在這里和大家分享一下，關(guān)于手機(jī)網(wǎng)站建設(shè)所注意的事項(xiàng)，以及其主要功能的實(shí)現(xiàn)方法和思路。

需要建設(shè)的網(wǎng)站的主要功能：

Ⅰ、用戶(hù)可以根據(jù)定位自己所在的位置，查看離自己最近的商家所發(fā)布的優(yōu)惠信息。

Ⅱ、用戶(hù)查看商家詳情頁(yè)面的時(shí)候，可以直接直觀(guān)的通過(guò)谷歌地圖的坐標(biāo)形式，一眼看到該商家所在位置。

Ⅲ、用戶(hù)可以查看自己所在位置和周?chē)猩碳业膶?shí)際距離有多遠(yuǎn)。

Ⅳ、用戶(hù)可以通過(guò)分類(lèi)查找，篩選查找，以及根據(jù)不同城市查找自己想要的信息。

以上是這個(gè)網(wǎng)站的主要功能，大家可以看出，該網(wǎng)站最主要的功能就是用戶(hù)可以實(shí)現(xiàn)手機(jī)定位，并很快的找到該商家。大家都知道，PC端的網(wǎng)站是無(wú)法現(xiàn)實(shí)定位服務(wù)的，更不用說(shuō)距離某個(gè)商家有多遠(yuǎn)了。直接進(jìn)入正題，實(shí)現(xiàn)這些功能的方法。

一、用戶(hù)如何通過(guò)網(wǎng)站定位自己的位置

首先需要了解的是，網(wǎng)站定位服務(wù)需要用到HTML5的寫(xiě)法，并且這點(diǎn)是一定要注意的，關(guān)于HTML5兼容性的問(wèn)題，可以不用考慮，因?yàn)槟壳笆謾C(jī)上的所有瀏覽器都是支持HTML5寫(xiě)法的，區(qū)分HTML5和HTML4的一點(diǎn)很簡(jiǎn)單，就是在網(wǎng)站源碼的開(kāi)頭部分，HTML5是<!DOCTYPE html>，就這么一行話(huà)，不像是HTML4一樣那么長(zhǎng)。好了，指定完網(wǎng)站代碼的編碼格式之后，就需要使用到HTML5的內(nèi)置定位函數(shù)，也就是navigator函數(shù)，具體的代碼，如下：

navigator.geolocation.getCurrentPosition(showPosition,showError);

showPosition：是指的執(zhí)行該函數(shù)的回調(diào)函數(shù)，也就是說(shuō)所有的執(zhí)行條件都在這里面了。

showError：是指該函數(shù)執(zhí)行錯(cuò)誤之后，是由于什么原因錯(cuò)誤的。

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: //用戶(hù)不允許使用定位服務(wù)
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT: //定位服務(wù)超時(shí)
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR: //未知錯(cuò)誤
x.innerHTML="An unknown error occurred."
break;
}
}

通過(guò)以上代碼，用手機(jī)瀏覽器運(yùn)行，就能夠看到當(dāng)前所在的經(jīng)緯度信息了，如下圖所示。

手機(jī)提示是否允許訪(fǎng)問(wèn)您所在當(dāng)前位置返回當(dāng)前位置經(jīng)緯度

二、獲得當(dāng)前經(jīng)緯度信息之后后，如何在谷歌地圖上標(biāo)注出該位置

知道準(zhǔn)確的經(jīng)緯度之后，我們只需要調(diào)用谷歌地圖的一個(gè)API接口就可以，然后通過(guò)創(chuàng)建所現(xiàn)在地圖的大小，并通過(guò)地圖API的接口，標(biāo)注當(dāng)前位置，具體代碼如下：

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)緯度之后，就能夠很輕松的在谷歌地圖上自動(dòng)標(biāo)記商家位置了，如下圖：

在谷歌地圖上對(duì)當(dāng)前位置進(jìn)行標(biāo)準(zhǔn)

三、如何計(jì)算當(dāng)前位置和指定商家的距離是多少

計(jì)算位置要用到的就是PHP代碼了，知道了兩點(diǎn)的經(jīng)緯度之后，通過(guò)一個(gè)計(jì)算公式很容易就能算出兩點(diǎn)之間的距離來(lái)，具體代碼如下：

<?php
function rad($d)
{
return $d * 3.1415926535898 / 180.0;
}
function getdistance($lng1,$lat1,$lng2,$lat2)//根據(jù)經(jīng)緯度計(jì)算距離
{
//將角度轉(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);
?>

四、寫(xiě)到最后

綜合以上代碼，最終完成當(dāng)前位置定位，已經(jīng)谷歌地圖顯示和當(dāng)前位置距離指定商家的距離是多少。然后通過(guò)實(shí)際的需要，對(duì)網(wǎng)站的數(shù)據(jù)庫(kù)和結(jié)構(gòu)進(jìn)行規(guī)劃，最終完成一個(gè)可以實(shí)現(xiàn)手機(jī)定位服務(wù)的手機(jī)網(wǎng)站。成都網(wǎng)站建設(shè)行業(yè)也逐漸從電腦的PC端，逐漸轉(zhuǎn)換為手機(jī)網(wǎng)站的建設(shè)，隨著手機(jī)客戶(hù)端和智能手機(jī)的興起，手機(jī)網(wǎng)站建設(shè)也會(huì)有越來(lái)越多的公司去做，相對(duì)于手機(jī)網(wǎng)站和電腦網(wǎng)站來(lái)說(shuō)，都是各有各的好處，我們之后不斷的提升自己的網(wǎng)站建設(shè)水平，才能在以后的網(wǎng)站建設(shè)市場(chǎng)逐漸站穩(wěn)腳步，持續(xù)而穩(wěn)定的發(fā)展下去。

注：請(qǐng)使用手機(jī)瀏覽器打開(kāi)以上網(wǎng)址，電腦訪(fǎng)問(wèn)可能會(huì)存在兼容性問(wèn)題。

當(dāng)前名稱(chēng)：成都網(wǎng)站建設(shè)中手機(jī)網(wǎng)站建設(shè)定位并實(shí)現(xiàn)地圖標(biāo)記和附近商家實(shí)現(xiàn)方式
當(dāng)前地址：http://www.kartarina.com/news14/185464.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容