文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML5地理位置与LBS应用开发的方法

2024-04-02 19:55

关注

这篇文章主要介绍“HTML5地理位置与LBS应用开发的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5地理位置与LBS应用开发的方法”文章能帮助大家解决问题。

1. LBS应用开发示例

在5年前,我们不敢想象会有如此众多的供应商提供免费的电子地图服务,而现在,开发者拥有众多选择:阿里云电子地图,百度电子地图,新浪电子地图,谷歌电子地图等。这里我们演示的是阿里云电子地图。

下面表示一个典型的LBS服务,通过GPS,Wi-Fi或其他方式查找设备所在的位置信息,通过此信息,在方圆1000米的范围内查找所有的酒店,总共前10个酒店显示在地图上。

具体示例代码如下所示。

<html  xmlns = “ http://www.w3.org/1999/xhtml” >

<head>

  <meta  charset = “ UTF-8”  />

  <title>定位功能</ title>

  <meta  http-equiv = “ pragma“  content = ” no-cache“  />

  <meta  name = ” viewport“  content = ”宽度=设备宽度,高度=设备高度,初始比例= 1.0,最小比例= 1.0,最大比例= 1.0 ,user-scalable = no“  />

  <link  href = ” opera.css“  rel = ”stylesheet“  type = ” text / css“ />

  <script  src = “ http://api.ditu.aliyun.com/map.js”  type = “ text / javascript” >

</ script> <!-上面提到的是阿里云地图->

  <脚本 类型= “ text / javascript”  charset = “ utf-8”  src = “ foropera.js” >

</ script>

</ head>

<body>

  <div  id = “ divLayer” 样式= “ background-color:#333 ; font-size:20px; color:#FFF; margin-top:200px; margin -left:0px; text-align:center; height:40px; line-height:40px;“ >

   = “ helpme” 样式= “不透明度:0.9;位置:绝对; z-index:1000;顶部:100px;左侧:20px;显示:无;背景颜色:#333; -webkit-border-radius:15px;右侧:20px;“ >

    <center  style = “ margin-left:10px; margin-right:10px; border-bottom:1px#777 solid;” >

      <span  style = “ color:#fff; height:30px; line-height:60px; font-size:26px;” >定位功能</ span>

    </ center>

    <div  style = “ color:#ccc; font-size:18px; margin-left:20px; margin-right:20px; margin-top:16px;” >

    </ div> <br  />

    <center>

      <button  onclick = “ hiddeDiv('helpme')”“  style = ” opacity:1; background-color:#777; border:0px; height:35px; line-height:25px ; color:#eee; width:140px; font-size:18px; -webkit-border-radius:5px;“ >关闭提示</ button>

    </ center> <br  />

  </ div>

  <div  id = “ help”  style = “ z-index:1000; position:absolute; left:0px; top:30px;” > </ div> <script  type = “ text / javascript” >

// <!

'helpme')。样式.display = 'none' ;

  }

  函数showhelp(){

  document.getElementById('helpme')。样式.display = '' ;

  }

  // ]] >

  </ script>

  <div  id = “ mapDiv”  style = “ width:480px; height:800px” > </ div>

  <div  id = “ lsResultDiv” > </ div> <script  type = “ text / javascript“ >

// <![CDATA [

  $('+ window.innerWidth + “ px; height:” + window.innerHeight + “

  px ”;

  function func_control(){

  alert('此处可以定制为某项功能');

  }

  Jla.require(“ Ali.Map.MapType.AliMobile”); //加载手机地图的功能

  Jla.onReady(onLoad);

  函数onLoad(){

  $('divLayer')。style.top =((window.innerHeight / 2)-20)+ “ px” ;

  $('divLayer').style.left =((window.innerWidth / 2)-150)+ “ px” ;

  $('divLayer').style。

  $('divLayer').innerHTML = '正在加载地图......' ;

  var hasGeolocation = !!(navigator.geolocation);

  if(!hasGeolocation){

  alert(“浏览器不支持Geolocation”);

  }

  var map,markers = [];

  var map = new AliMap(“ mapDiv”); //使用id为mapDiv的层创建一个地图对象

  AliEvent.addListener(map,  “ click”,function(){ //监听事件

  alert(“有人放置了地图。”);

  });

  localStorage.wd = “ 0” ; //如果没有获取到任何地理坐标,则直接替换为0

  localStorage.jd = “ 0” ;如果没有获取到任何地理坐标,则

  直接替换为0 showmap(localStorage.wd,localStorage.jd,localStorage.cx); //展示地图

  var geolocationOptions = {timeout:30000,enableHighAccuracy:true,maximumAge:5000};

  $('divLayer').innerHTML = '正在获取坐标......' ;

  navigator.geolocation.getCurrentPosition(geolocationSuccess,geolocationError,

  geolocationOptions);

  function geolocationSuccess(position){

  alert(“北纬:” + position.coords.latitude + “,东经:” + position.coords.longitude);

  //打开当前的经纬度坐标

  localStorage.wd = position.coords.latitude;

  localStorage.jd = position.coords.longitude;

  localStorage.cx = position.coords.heading;

  showmap(localStorage.wd,localStorage.jd,localStorage.cx); //展示地图

  }

  setInterval(function(){

  //每隔20秒重新刷新地图

  showmap(localStorage.wd,localStorage.jd,localStorage.cx);

  },20000);

  function geolocationError(err){

  switch(err.code){

  case 1:

  $('divLayer').innerHTML = '坐标获取被拒绝,地图加载失败' ;

  休息;

  情况2:

  $('divLayer')。innerHTML = '连不上GPS卫星或网络断了' ;

  休息;

  情况3:

  $('divLayer').innerHTML = ';

  休息;

  默认值:

  $('divLayer').innerHTML = '发生严重异常,请刷新页面' ;

  休息;

  }

  }

  函数showmap(wd,jd,cx){

  $('divLayer').innerHTML = '正在展示数据......' ;

  //在该坐标处创建一个标记

  var MAPMAP = new AliLatLng(localStorage.wd,localStorage.jd);

  if(cx === null){

  alert('对不起,取不到当前朝向');

  }

  yycontrol = new AliMapOverviewControl({open:true}); //创建一个鹰眼控件

  map.addControl(yycontrol); //将鹰眼控件添加到地图

  //设置调用的地图类型为手机版地图

  map.setMapType(new(Jla.get(“ Ali.Map.MapType.AliMobile”))());

  map.centerAndZoom(MAPMAP,14); //定位地图

  search =新的AliLocalSearch(); //设置搜索结果处理函数

  AliEvent.addListener(search,“ searchcomplete”,onSearchComplete);

  AliEvent.addListener(search,“ searchexception ”,onSearchException);

  var search_keyword = “酒店” ;

  var search_radius = 1000; //搜索

  国会是1000米search.keyword = search_keyword; //设置关键字

  search.pageSize = 10; //设置返回结果数量

  search.center = map.getCenter();

  search.execute(); //开始搜索

  marker = new AliMarker(MAPMAP); //将标记添加到地图

  //创建事件监视器,在MapMove函数

  map.openInfoWindow(MAPMAP,'我的位置','<div>附近的蓝点,是方圆

  '+ search_radius +'米内的'+ search_keyword +' < \ / div> ');

  var icons = [

  newAliIcon(“ icon1.gif”,{x:16,y:27},{x:8,y:27}),

  newAliIcon(“ icon2.png”,{x:23,y:29} ,{x:13,y:14}),

  newAliIcon(“ icon3.png”,{x:49,y:59},{x:24,y:56})

  ]];

  marker.setIcon(icons [1]);

  map.addOverlay(marker);

  椭圆形=新

  AliOvalOverlay(map.getProjection()。getSquare(MAPMAP,search_

  radius),{editSymbolCtl:128}); //以中心为中心,3000米为直径的圆

  map.addOverlay(oval);

  椭圆形。开始编辑({keepRatio:true});

  椭圆形.endEditting({keepRatio:true});

  函数onSearchException(exception){

  alert(exception.message);

  }

  函数onSearchComplete(){  //处理搜索结果

  变量标记,resultDiv = document.getElementById(“ lsResultDiv”);

  AliEvent.deposeNode(resultDiv,true);

  while(marker = markers.pop()){

  map.removeOverlay(marker);

  }

  for(var i = 0; i < search.points.length; i++){

  var  poi = search.points [ i ];

  标记=新AliMarker(poi.latlng,{POI名称});

  映射.addOverlay(marker);

  //将标记的信息浮窗内容记录下来

  marker._desc = “我是第” +(i + 1)+ “个” + search_keyword;

  AliEvent.bind(marker,  “ click”  ,marker,onMarkerclick);

  markers.push(marker);

  }

  }

  函数onMarkerclick(){

  //确保信息浮窗在视图范围内

  无功 infowin = this.openInfoWindow(此。,this._desc);

  infowin.moveIntoView();

  }

  $('divLayer').innerHTML = “” ;

  $('divLayer')。样式.top = “ 0px” ;

  $('divLayer')。样式.left = “ 0px” ;

  $('divLayer')。风格。width = “ 0px” ;

  $('divLayer')。样式.display = 'none' ;

  }

  }

  // ]] >

  </ script>

</ body>

关于“HTML5地理位置与LBS应用开发的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯