济南网站建设|济南建网站|济南网站制作|济南网站建设公司|山东网站建设|济南软件开发|山东软件开发-国迅网络
济南网站建设|济南网站制作|济南网站建设公司|山东网站建设|APP开发|济南软件开发|山东软件开发
国迅网,织天下!   柚子:  Shirley-网站建设 (1134360006)      橙子:  Lydia-网站建设(3205922021)     柠檬:  Vivian-网站建设(3224697170)    苹果:  销售三部-网站建设(343969037)

网站新闻

网站制作中公司手机网站建设定位并实现地图标记和附近商家实现方式

更新时间:2018-01-03 09:21:43点击次数:510次字号:T|T

随着移动互联网时代的到来,很多的网站制作公司客户都开始走向手机网站制作方向发展,通过手机网站用户可以随时定位自己的位置,并查看到自己附近的商家和其他想要查找的信息。手机网站制作也随之越来越受到互联网公司的重视,但是由于手机端网站制作和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的接口,标注当前位置,具体代码如下:

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

(编辑:admin)

新闻中心 | News

More网站知识 | Answers

联系方式 | Contact

地址:济南市历下区轻风路6号
            鲁商盛景广场办公A楼1005

电话:4008-360-670  

            0531-88665598

邮箱:guoxunkeji@163.com

Q Q :343969037   3205922021 

邮编:250014

关于国迅 | 主机邮箱 | 联系我们 | 网站套餐

Copyright 2004-2018 版权所有 All rights reserved.  服务热线:0531-88665598
E-MAIL: guoxunkeji@163.com 国家信息产业部备案 鲁ICP备09033629号 鲁公网安备 37010202000220号

济南网站建设|济南网站制作|济南网站建设公司|山东网站建设|APP开发|济南软件开发|山东软件开发