H5+百度地图定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>获取地理位置</title>
<style>
html,body,#allmap{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="allmap"></div> <script>
var map;
//异步加载地图
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=j9Qhl3n6K2RbPb2EnYr5LW0mEyaacdiC&callback=init";
document.body.appendChild(script);
}
function init() {
var map1 = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(110, 38); // 创建点坐标
map1.centerAndZoom(point,15);
map1.enableScrollWheelZoom(); //启用滚轮放大缩小
map=map1;
}
window.onload = loadJScript;
//异步加载地图
//获取经纬度
var x = document.querySelector("#box");
function getLocation(){
if(navigator.geolocation){
console.log("123");
navigator.geolocation.getCurrentPosition(function(position){
console.log(456);
x.innerHTML ="纬度："+position.coords.latitude +"<br>经度："+
position.coords.longitude;
var longitude = position.coords.longitude,latitude = position.coords.latitude;
//调用百度地图api：
theLocation(map,longitude,latitude)
},
function (error){
switch(error.code)
{
case error.PERMISSION_DENIED:
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;
}
},
{
// 指示浏览器获取高精度的位置，默认为false
enableHighAcuracy: true,
// 指定获取地理位置的超时时间，默认不限时，单位为毫秒
timeout: 5000,
// 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
maximumAge: 3000
}
);
}else{
x.innerHTML="该浏览器不支持获取地理位置！";
alert('123');
}
}
function theLocation(map,longitude,latitude) {
if (longitude != "" && latitude != "") {
map.clearOverlays();
var new_point = new BMap.Point(longitude, latitude);
//坐标转换
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(new_point);
convertor.translate(pointArr, 1, 5, function(data){
if(data.status === 0) {
//标注转换后的坐标
var marker = new BMap.Marker(data.points[0]);
map.addOverlay(marker);
var label = new BMap.Label("您现在的位置", {offset: new BMap.Size(20, -10)});
marker.setLabel(label); //添加百度label
map.setCenter(data.points[0]);
map.centerAndZoom(data.points[0],18);
}
})
}
}
//获取位置
getLocation();
</script> </body>
</html>
H5+百度地图定位的更多相关文章
- Android 百度地图定位(手动+自动) 安卓开发教程
近由于项目需要,研究了下百度地图定位,他们提供的实例基本都是用监听器实现自动定位的.我想实现一种效果:当用户进入UI时,不定位,用户需要定位的时候,自己手动点击按钮,再去定位当前位置. 经过2天研究 ...
- 百度地图定位SDK 之构想
百度地图定位 前提 从香港旅游回来,心中油然升起一股热血滂湃,激励自己发现市场需求,向创业奋进,朝着梦想前进. 简介 百度Android定位SDK支持Android1.5以及以上设备,提供: 定位功能 ...
- Android使用百度地图定位并显示手机位置后使用前置摄像头“偷拍”
今天老板让我验证一下技术可行性,记录下来. 需求 :定位手机的位置并在百度地图上显示,得到位置后使用前置摄像头进行抓拍 拿到这个需求后,对于摄像头的使用不太熟悉,于是我先做了定位手机并在百度地图上显示 ...
- IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息
IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocati ...
- ios调用百度地图定位遇到的奇葩问题
app项目过程中需要用到百度地图,然后网上可以查资料看官网文档,最后弄了好几天还是不行,找了各位前辈帮忙虽然解决了,但是把代码拷贝到我的项目时又无法定位了,最后查看了下原因是info配置出了问题,不是 ...
- 【ASP.NET 进阶】根据IP地址进行百度地图定位
昨天有完成一个[ASP.NET 进阶]根据IP返回对应位置信息 的小Demo,既然可以通过IP获得位置信息,那当然可以通过位置信息的经纬度获取IP的当前定位了,虽然与实际地址偏移较大,毕竟不是GPRS ...
- iOS第三方地图－百度地图定位的封装
// // BaiduMapTools.h // baidumapTest // // Created by apple on 15/8/26. // Copyright (c) 2015年 tqh. ...
- android中百度地图定位的实现方法（仅适用于真机+WIFI联网环境）
注意:此代码的环境是:真机(系统版本为Android4.2.2)+WIFI联网(才能实现最后的运行结果):使用虚拟机调试会出现各种问题. 第一步:下载SDK和申请Key 到百度的网站http://de ...
- android 百度地图定位功能实现
历经几天时间,终于把定位功能给实现了,可谓是费劲千辛万苦啊,有定位知识还有图层知识,在这里我把代码给大家贴出来,一起分享一下下啦. package com.example.foreveross.off ...
随机推荐
- 基于jCOM搭建Java－微软信息桥梁(上)
本文将重点讨论BEA的Java/COM解决方案,是全文的第一部分,细致分析BEA提供的Java/COM互操作解决方案—jCOM的实现原理. 一.jCOM简介 据Gartner的研究分析,在名列全球前1 ...
- 注册一个GitHub用户的过程
今天,我注册了一个GitHub用户.一开始,不知道GitHub是什么,还以为叫什么"getup",心里还想着什么网站名字这么奇怪,后来在舍友的帮助之下知道了原来是叫GitHub.下 ...
- SQLServer中数据加密方法
对SQLServer中的数据进行加密,有三种方法, 1. 在程序语言中先对数据进行加密后再把加密后的数据保存在SQLServer数据库中: 2. 利用SQLServer未公开的加密密码函数,在SQ ...
- c++define的用法
c++define的用法 在写程序时经常会碰到这样一个问题,我们需要重复写很多相同的代码,并且这些代码结构相同.总是想自己把这段代码封装一下然后直接进行调用,但是如果这段代码逻辑并不复杂,并且代码 ...
- AI-Info-Micron：人如其食：人工智能和人类微生物组
ylbtech-AI-Info-Micron:人如其食:人工智能和人类微生物组 1.返回顶部 1. 人如其食:人工智能和人类微生物组 “相信你身体发出的信号”,的确是一个很好的建议.研究人员在不遗余力 ...
- php实现socket简单的例子
一.Socket简介 1.socket只不过是一种数据结构 2.使用这个socket数据结构去开始一个客户端和服务器之间的会话 3.服务器是一直在监听准备产生一个新的会话.当一个客户端连接服务端,它就 ...
- 十二生肖查询网页版制作（php）
今天无聊做了一个十二生肖查询器: 预览网址效果:http://hongxing01.hktd02u.me48.com/03Sxcx 源代码下载:http://down.51cto.com/data/1 ...
- Qt5学习笔记（消息基础）
#include "MyWidget.h" #include <QApplication> #include <QEvent> #include <Q ...
- [Objective-C语言教程]命令行参数（23）
执行时,可以将一些值从命令行传递给Objective-C程序. 这些值称为命令行参数,很多时候它们对程序很重要,特别是当想要从外部控制程序而不是在代码中对这些值进行硬编码时就很有用了. 命令行参数使用 ...
- [原创] PHP 使用Redis实现锁
目录 锁实现的注意点 加锁 connect 与 pconnect 解锁 Redis 中使用 Lua 脚本的注意点 Redis集群分布式锁 RedLock 算法 锁实现的注意点 互斥: 任意时刻, 只能 ...