成都網站建設中手機網站建設定位并實現地圖標記和附近商家實現方式
2022-08-05 分類： 手機網站建設
隨著移動互聯網時代的到來，很多的成都網站建設客戶都開始走向手機網站建設方向發展，通過手機網站用戶可以隨時定位自己的位置，并查看到自己附近的商家和其他想要查找的信息。手機網站建設也隨之越來越受到互聯網公司的重視，但是由于手機端網站建設和PC端的網站建設，在技術和實現方式上有所不同，所以，很多成都網站建設公司的技術人員對這塊還很生疏，最近由于工作的需要，著手去研究一個手機網站，順便在這里和大家分享一下，關于手機網站建設所注意的事項，以及其主要功能的實現方法和思路。
需要建設的網站的主要功能：
Ⅰ、用戶可以根據定位自己所在的位置，查看離自己最近的商家所發布的優惠信息。
Ⅱ、用戶查看商家詳情頁面的時候，可以直接直觀的通過谷歌地圖的坐標形式，一眼看到該商家所在位置。
Ⅲ、用戶可以查看自己所在位置和周圍所有商家的實際距離有多遠。
Ⅳ、用戶可以通過分類查找，篩選查找，以及根據不同城市查找自己想要的信息。
以上是這個網站的主要功能，大家可以看出，該網站最主要的功能就是用戶可以實現手機定位，并很快的找到該商家。大家都知道，PC端的網站是無法現實定位服務的，更不用說距離某個商家有多遠了。直接進入正題，實現這些功能的方法。
成都網站建設中手機網站建設定位并實現地圖標記和附近商家實現方式" src="/upload/pic18/201401111217002678.jpg" />
首先需要了解的是，網站定位服務需要用到HTML5的寫法，并且這點是一定要注意的，關于HTML5兼容性的問題，可以不用考慮，因為目前手機上的所有瀏覽器都是支持HTML5寫法的，區分HTML5和HTML4的一點很簡單，就是在網站源碼的開頭部分，HTML5是<!DOCTYPE html>，就這么一行話，不像是HTML4一樣那么長。好了，指定完網站代碼的編碼格式之后，就需要使用到HTML5的內置定位函數，也就是navigator函數，具體的代碼，如下：
navigator.geolocation.getCurrentPosition(showPosition,showError);
showPosition：是指的執行該函數的回調函數，也就是說所有的執行條件都在這里面了。
showError：是指該函數執行錯誤之后，是由于什么原因錯誤的。
showPosition函數的代碼：
function showPosition(position)
{
var lat = position.coords.latitude; //獲得當前位置的緯度
var lng = position.coords.longitude; //獲得當前位置的經度
alert( "您所在的位置： 緯度" + lat + "，經度" + lng ); //輸出當前位置的經緯度信息
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函數的代碼：
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: //瀏覽器不支持Geolocation函數
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE: //用戶不允許使用定位服務
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT: //定位服務超時
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR: //未知錯誤
x.innerHTML="An unknown error occurred."
break;
}
}
通過以上代碼，用手機瀏覽器運行，就能夠看到當前所在的經緯度信息了，如下圖所示。
知道準確的經緯度之后，我們只需要調用谷歌地圖的一個API接口就可以，然后通過創建所現在地圖的大小，并通過地圖API的接口，標注當前位置，具體代碼如下：
<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!"});
}
加入以上代碼，在取得準確經緯度之后，就能夠很輕松的在谷歌地圖上自動標記商家位置了，如下圖：
計算位置要用到的就是PHP代碼了，知道了兩點的經緯度之后，通過一個計算公式很容易就能算出兩點之間的距離來，具體代碼如下：
<?php
function rad($d)
{
return $d * 3.1415926535898 / 180.0;
}
function getdistance($lng1,$lat1,$lng2,$lat2)//根據經緯度計算距離
{
//將角度轉為狐度
$radLat1=deg2rad($lat1);
$radLat2=deg2rad($lat2);
$radLng1=deg2rad($lng1);
$radLng2=deg2rad($lng2);
$a=$radLat1-$radLat2;//兩緯度之差,緯度<90
$b=$radLng1-$radLng2;//兩經度之差緯度<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);
?>
綜合以上代碼，最終完成當前位置定位，已經谷歌地圖顯示和當前位置距離指定商家的距離是多少。然后通過實際的需要，對網站的數據庫和結構進行規劃，最終完成一個可以實現手機定位服務的手機網站。成都網站建設行業也逐漸從電腦的PC端，逐漸轉換為手機網站的建設，隨著手機客戶端和智能手機的興起，手機網站建設也會有越來越多的公司去做，相對于手機網站和電腦網站來說，都是各有各的好處，我們之后不斷的提升自己的網站建設水平，才能在以后的網站建設市場逐漸站穩腳步，持續而穩定的發展下去。
注：請使用手機瀏覽器打開以上網址，電腦訪問可能會存在兼容性問題。
當前名稱：成都網站建設中手機網站建設定位并實現地圖標記和附近商家實現方式
當前地址：http://www.kartarina.com/news14/185464.html
網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設、手機網站建設等
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 為什么手機網站建設費用懸殊這么大 2022-08-05
- 淺談手機網站建設注意事項 2022-08-04
- 近年來移動端規范化的手機網站建設流程無外乎這些 2022-08-04
- 手機網站建設開發技巧與注意事項 2022-08-01
- 手機網站建設要注意哪些情況 2022-08-01
- 高質量的手機網站建設 必須要注意這五個要素 2022-07-31
- 手機網站建設十大原則 2022-07-30
- 成都手機網站建設費用估算是多少 2022-07-28
- 手機網站建設縮略圖設計攻略 2022-07-22
- 成都手機網站建設過程中，我們要遵守什么規范？ 2022-08-03
- 手機網站建設需要注意的五個問題有哪些？ 2022-07-30
- 手機網站建設使用長滾動網頁的好處 2022-07-29
- 手機網站建設相對PC端網站有何優勢 2022-07-27
- 手機網站建設能給專業市場帶來哪些優勢？ 2022-07-23
- 成都手機網站建設，你需要考慮這些…… 2022-07-19
- 手機網站建設都有哪些注意事項？ 2022-07-15
- 企業手機網站建設的三種方法 2022-07-15
- 手機網站建設的原則 2022-07-15
- 成都手機網站建設 你需要注意這五個要素 2022-07-14