`

百度地图javascript api实现定位

    博客分类:
  • html
 
阅读更多
百度地图API: http://api.map.baidu.com/lbsapi/cloud/
开发前需要先申请密钥(key)

在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。

经过测试发现,目前的浏览器定位技术依然不靠谱,误差很大,基本没有实用性。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8704bb2733e7bbfd5fbd7ddb73861d87"></script>
<title>地图官网展示效果</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>

<script type="text/javascript">

var map = new BMap.Map("allmap");  // 创建Map实例
var enableBaiduLocation = false; //暂时不用百度自带的浏览器定位接口

if(enableBaiduLocation) {
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,15);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
} else {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction, {
enableHighAcuracy: true,
timeout: 5000
});
} else {
alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
}
}

function successFunction(position) {
var latitude = position.coords.latitude; //维度
var longitude = position.coords.longitude; //经度
var curPoint = new BMap.Point(longitude, latitude);
map.centerAndZoom(curPoint, 15);     // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
map.enableScrollWheelZoom();                            //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
map.setCurrentCity("成都");          // 设置地图显示的城市 此项是必须设置的

var marker1 = new BMap.Marker(curPoint);  // 创建标注
map.addOverlay(marker1);              // 将标注添加到地图中       

map.addEventListener("click",function(e){
alert("点击坐标:" + e.point.lng + "," + e.point.lat);
});
}

function errorFunction() {
alert("error");
}
</script>
分享到:
评论

相关推荐

    百度地图API使用整合(javascript)

    测试整合百度地图API,通过Ajax方式读取数据,实现定位。(数据库自行建立)

    百度地图API地图描点示例

    百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等...

    百度地图api实现部分功能,根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口

    百度地图api实现部分功能,根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口

    springboot小功能:集成百度地图实现定位打卡功能

    当点下定位按钮时,可以在页面上显示所在区域的大致位置(精确到市级...使用百度地图的API实现定位功能,将返回的json数据封装成接口;点击按钮向接口请求数据,将请求后的定位信息使用javascript嵌入到文本域中。​​

    百度离线地图 js api

    自己改的百度离线地图API2.0,可以断网运行, 包含 1.拉框放大,测距,画线,多边型等功能 2.自定缩放级别显示指定标签 3.快速定位及隐藏指定类型 其他api项唯一 一验证,抛砖引玉,待大家一起研究。

    百度地图API详情介绍

    百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等...

    百度地图API记录轨迹和里程Javascript版html 增强版

    里面包含完整代码,提供ak密钥,到百度地图页面申请即可,实现了手机和电脑浏览器的定位功能

    Django接收GPS数据并实现百度地图定位

    百度web端实现多边形电子围栏;批量上传围栏信息,地图上提取多边形区域经纬度;可以通过拉拽添加点的形式添加边的数量;可判断marker是否在多边形区域区域内;,超出区域后邮件报警;有详细的数据解析

    百度地图api定位+附近搜索poi

    百度地图API是一套为开发者免费提供的基于百度地图的应用程序接口,包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本,提供基本地图、位置搜索、周边搜索

    百度API使用方法

    百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务,提供基本地图展现、搜索、定位、逆/...

    JS使用百度地图API自动获取地址和经纬度操作示例

    主要介绍了JS使用百度地图API自动获取地址和经纬度操作,结合实例形式分析了javascript与百度地图API接口交互实现获取地址与经纬度相关操作技巧,需要的朋友可以参考下

    百度地图JavascriptApi Marker平滑移动及车头指向行径方向

    相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像“僵尸跳”一样,一蹦一蹦的给...

    百度地图Dome

    百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务,提供基本地图展现、搜索、定位、逆/...

    nodejs根据ip数组在百度地图中进行定位

    利用node接收到的ip数组组装url后对百度地图api发送请求并返回请求结果数组给前端 1. 前端代码部分(jquery) 重要步骤: 1&gt; 引用百度地图 2&gt; 实例化百度地图,添加相关缩放控件,设置主图 3&gt; 重写http请求,设置...

    百度定位.html

    前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够帮助到有需要的...

    校园电子地图的设计与实现

    针对已有主流地理信息系统平台存在价格昂贵、且对开发者技术要求高等局限性,采用地图搜索引擎提供的API,结合JSP与JavaScript技术,根据学校的地理结构,设计开发了校园在线电子地图。实现了校园地图显示、建筑物...

    微信企业号开发之微信考勤百度地图定位

    原来使用的Web组件百度不打算更新了,也是重新查了一下百度地图的其他API,还有一个JavaScript API大众版,于是试了试,没想到竟然解决了。 核心代码很简单: &lt;div id=allmap&gt;&lt;/div&gt; [removed][removed] ...

    js百度地图地位

    调取百度地图API,代码可运行.

    百度地图应用样例

    百度地图给我们提供很nice的API,我们在实际项目中可以调用这些API完成很多跟位置相关的操作。 样例将介绍如何使用API进行定位,标注,绘图等功能。 详情介绍:...

    区域地图联动.zip

    利用百度API实现的区域地图联动,要实现的需求是选择省份和城市县区后,下方地图可以自动定位到该区域,方便用户...实现思路是通过省市县三级联动提供具体的经纬度来对地图进行定位,地图绘制调用了百度地图API来实现。

Global site tag (gtag.js) - Google Analytics