文档章节

基于百度地图的HTML5地理位置定位实例

凉粉
 凉粉
发布于 2015/10/29 18:29
字数 214
阅读 27
收藏 3
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
 function getLocation()
 { 
  if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000});
  }else{
   alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
  }
 }
 
 function showMap(value)
 {
  var longitude = value.coords.longitude;
  var latitude = value.coords.latitude;
  var map = new BMap.Map("map");
  var point = new BMap.Point(longitude, latitude);    // 创建点坐标
  map.centerAndZoom(point, 15);
  var marker = new BMap.Marker(new BMap.Point(longitude, latitude));  // 创建标注
  map.addOverlay(marker);              // 将标注添加到地图中
 }
 
 function handleError(value)
 {
  switch(value.code){
   case 1:
    alert("位置服务被拒绝");
    break;
   case 2:
    alert("暂时获取不到位置信息");
    break;
   case 3:
    alert("获取信息超时");
    break;
   case 4:
    alert("未知错误");
    break;
  }
 }
 
 function init()
 {
  getLocation();
 }
 
 window.onload = init;
 
</script>
</head>
<body>
 <div id="map" style="width:600px;height:600px;"></div>
</body>
</html>


© 著作权归作者所有

凉粉
粉丝 17
博文 28
码字总数 6212
作品 3
成都
程序员
私信 提问
html5如何利用百度地图快速的定位经纬度

定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则...

燚轩科技
2018/05/14
0
0
HTML5 Geolocation API和Google Maps API结合实现路线导航

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来...

iNiL0119
2016/09/14
180
0
基于HTML5 geolocation 实现的天气预报功能

最近一直在学习HTML5,因为要开发手机项目所以先把HTML5学习下。 基本思路: 1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置。 2. 根据用户设置的城市切换到所在...

随风随影
2013/08/20
2.5K
1
HTML5编程之旅 第1站 Geolocation

HTML5 Geolocation 初探 让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API(地理定位API),可以请求用户共享他们的...

倪伟伟
2014/02/24
259
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 7系统增加swap

转载请注明文章出处:CentOS 7系统增加swap swap是位于磁盘上的特殊文件(或分区),属于“虚拟内存”的一部分。通俗点就是内存的备胎,内存充足的情况下,基本上没swap什么事(和设置有关)...

tlanyan
14分钟前
1
0
基于Prometheus和Grafana的监控平台 - 环境搭建

相关概念 微服务中的监控分根据作用领域分为三大类,Logging,Tracing,Metrics。 Logging - 用于记录离散的事件。例如,应用程序的调试信息或错误信息。它是我们诊断问题的依据。比如我们说...

JAVA日知录
54分钟前
5
0
PHP运行时全局构造体

struct _php_core_globals { zend_bool magic_quotes_gpc; // 是否对输入的GET/POST/Cookie数据使用自动字符串转义。 zend_bool magic_quotes_runtime; //是否对运行时从外部资源产生的数据使...

冻结not
55分钟前
4
0
webpack插件html-webpack-plugin

本文转载于:专业的前端网站→webpack插件html-webpack-plugin 1、插件安装 npm install html-webpack-plugin --save-dev 2、插件使用 webpack.config.js配置文件为: var htmlWebpackPlugin=...

前端老手
今天
6
0
数据挖掘

zhengchen1996
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部