成都网站建设中手机网站建设定位并实现地图标记和附近商家实现方式

2022-08-05 分类：手机网站建设

随着移动互联网时代的到来，很多的成都网站建设客户都开始走向手机网站建设方向发展，通过手机网站用户可以随时定位自己的位置，并查看到自己附近的商家和其他想要查找的信息。手机网站建设也随之越来越受到互联网公司的重视，但是由于手机端网站建设和PC端的网站建设，在技术和实现方式上有所不同，所以，很多成都网站建设公司的技术人员对这块还很生疏，最近由于工作的需要，着手去研究一个手机网站，顺便在这里和大家分享一下，关于手机网站建设所注意的事项，以及其主要功能的实现方法和思路。

需要建设的网站的主要功能：

Ⅰ、用户可以根据定位自己所在的位置，查看离自己最近的商家所发布的优惠信息。

Ⅱ、用户查看商家详情页面的时候，可以直接直观的通过谷歌地图的坐标形式，一眼看到该商家所在位置。

Ⅲ、用户可以查看自己所在位置和周围所有商家的实际距离有多远。

Ⅳ、用户可以通过分类查找，筛选查找，以及根据不同城市查找自己想要的信息。

以上是这个网站的主要功能，大家可以看出，该网站最主要的功能就是用户可以实现手机定位，并很快的找到该商家。大家都知道，PC端的网站是无法现实定位服务的，更不用说距离某个商家有多远了。直接进入正题，实现这些功能的方法。

一、用户如何通过网站定位自己的位置

首先需要了解的是，网站定位服务需要用到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的接口，标注当前位置，具体代码如下：

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端，逐渐转换为手机网站的建设，随着手机客户端和智能手机的兴起，手机网站建设也会有越来越多的公司去做，相对于手机网站和电脑网站来说，都是各有各的好处，我们之后不断的提升自己的网站建设水平，才能在以后的网站建设市场逐渐站稳脚步，持续而稳定的发展下去。

注：请使用手机浏览器打开以上网址，电脑访问可能会存在兼容性问题。

分享标题：成都网站建设中手机网站建设定位并实现地图标记和附近商家实现方式
当前网址：/news14/185464.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站建设、手机网站建设等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容