H5获取手机地理位置，GPS坐标转换成百度坐标并显示在百度地图上

最新推荐文章于 2024-06-24 16:40:08 发布
最新推荐文章于 2024-06-24 16:40:08 发布
阅读量9.1k 收藏 10
点赞数 3
分类专栏： PHP全栈
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbc1477996221/article/details/81629638
版权

百度密钥：自己去百度地图开发平台申请
浏览器无法使用定位api，手机端亲测有效
打开wifi定位会更加准确，误差10米左右
重新设置了lable样式

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<!-- v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=CwqECi3qpXxC8unBV05p0hiG7A8ut480"></script>
<!-- 在页面的头部应用点聚合工具开源库的文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
</script>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">

    // 创建地图实例
    var gpsmarkers = [];
    var markers = [];
    var pointArr=[];
    var pt = null;

    navigator.geolocation.getCurrentPosition(geo_success, geo_error,{
        // 指示浏览器获取高精度的位置，默认为false
        enableHighAcuracy: true,
        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
        timeout: 5000,
        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
        maximumAge: 1000
    });

    function geo_success(position) {
      // console.log(position.coords.latitude, position.coords.longitude);

        pt =new BMap.Point(position.coords.longitude,position.coords.latitude);
        // alert(position.coords.longitude);

        var convertor = new BMap.Convertor();
        pointArr.push(pt);
        convertor.translate(pointArr, 1, 5, translateCallback);
    }

    function geo_error(msg) {
      console.log(msg.code, msg.message);
      alert(定位失败,请打开手机GPS);
    }
    //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
            alert("经度:"+data.points[0].lng);//输出百度坐标的经度
            alert("纬度:"+data.points[0].lat);//输出百度坐标的纬度
            var map = new BMap.Map("container");
            var point = new BMap.Point(120.196878, 35.975994);
            map.centerAndZoom(point,15);
            var marker = new BMap.Marker(data.points[0]);//创建小红点
            map.addOverlay(marker);//将小红点放到地图上
            var label = new BMap.Label("123",{offset:new BMap.Size(20,-10)});//label
            //设置lebel样式
            label.setStyle({
                width: "120px",
                color: '#fff',
                background: '#ff8355',
                border: '1px solid "#ff8355"',
                borderRadius: "5px",
                textAlign: "center",
                height: "26px",
                lineHeight: "26px"
            });
            marker.setLabel(label); //添加百度label
            map.centerAndZoom(data.points[0],18);

            //设置精度圈
            var circle = new BMap.Circle(data.points[0],100); //创建圆
            //设置圆形的边线颜色
            circle.setStrokeColor("#00CCFF");
            //设置圆形的填充颜色
            circle.setFillColor("#00CCFF");
            //设置圆形的填充透明度，取值范围0 - 1
            circle.setFillOpacity(0.1);
            //设置圆形的边线透明度，取值范围0 - 1
            circle.setStrokeOpacity(0.01);
            //设置圆形边线的宽度，取值为大于等于1的整数
            circle.setStrokeWeight(1);
            map.addOverlay(circle);            //增加圆
        }
    }


    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    //添加平移缩放控件
    var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
    map.addControl(new BMap.NavigationControl(opts));
    //添加比例尺控件
    map.addControl(new BMap.ScaleControl());
    //添加缩略地图控件
    map.addControl(new BMap.OverviewMapControl());
     仅当设置城市信息时，MapTypeControl的切换功能才能可用
    map.addControl(new BMap.MapTypeControl());
    // map.setCurrentCity("青岛");

    //修改地图风格
    //清新蓝风格(light)
    //黑夜风格(dark)
    //自然绿风格(grassgreen)
    //精简风格(googlelite)
    //默认地图样式(normal)
    var mapStyle={  style : "normal" }
    map.setMapStyle(mapStyle);

    // 编写自定义函数,创建标注
    // function addMarker(point,label){
    //  var marker = new BMap.Marker(point);
    //  map.addOverlay(marker);
    //  marker.setLabel(label);
    // }
    // 随机向地图添加25个标注
    // var bounds = map.getBounds();
    // var sw = bounds.getSouthWest();
    // var ne = bounds.getNorthEast();
    // var lngSpan = Math.abs(sw.lng - ne.lng);
    // var latSpan = Math.abs(ne.lat - sw.lat);
    // for (var i = 0; i < 90; i++) {
    //  var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
    //  var label = new BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)});
    //  addMarker(point,label);
    // }
    // function deletePoint(){
    //  var allOverlay = map.getOverlays();
    //  for (var i = 0; i < allOverlay.length -1; i++){
    //      if(allOverlay[i].getLabel().content == "我是id=1"){
    //          map.removeOverlay(allOverlay[i]);
    //          return false;
    //      }
    //  }
    // }


    //创建小狐狸
    // var pt = new BMap.Point(116.417, 39.909);
    // var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
    // var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    // map.addOverlay(marker2);              // 将标注添加到地图中

    //设置弹跳的动画
    // var map = new BMap.Map("container");
    // var point = new BMap.Point(116.404, 39.915);
    // map.centerAndZoom(point, 15);
    // var marker = new BMap.Marker(point);  // 创建标注
    // map.addOverlay(marker);               // 将标注添加到地图中
    // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画


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

    // var opts = {
    //     width : 200,     // 信息窗口宽度
    //     height: 20,     // 信息窗口高度
    //     title : "李百成"  // 信息窗口标题
    // }
    // var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
    // map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口


    //浏览器定位
    // 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());
    //  }
    // });

    //根据用户IP 返回城市级别的定位结果
    // function myFun(result){
    //  var cityName = result.name;
    //  map.setCenter(cityName);
    //  alert("当前定位城市:"+cityName);
    // }
    // var myCity = new BMap.LocalCity();
    // myCity.get(myFun);

</script>
</body>
</html>
李柏成
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
[H5动画制作系列]坐标转化问题一次搞清,一了百了
格码老师教编程
11-02 108
技术要点:局部坐标,全局坐标,坐标转化
调用百度地图，选取坐标接口，并转换成GPS坐标
zhaotengfei36520的专栏
01-15 3773
调用百度地图，选取坐标接口，并转换成GPS坐标。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /
手机页面强制横屏显示 html5 h5页面 强制横屏 可更改竖屏
02-08
手机页面强制横屏显示 竖屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑，先上传，以备下次使用...
html5获取地图坐标系,H5获取定位后转为百度地图坐标(示例代码)
weixin_39616880的博客
05-31 737
function getLocation() {if(navigator.geolocation) {var getOption={enableHighAccuracy:true,timeout:8000,maximumAge:0};navigator.geolocation.getCurrentPosition(showPosition, showError,getOption);} else ...
2024-06-24 百度地图的使用及gps定位坐标获取
最新发布
一只白猫罢了
06-24 372
本项目为移动端项目，发布到welink平台中进行测试，本次定位使用了平台提供的api，由于定位获取需要用户手动给权限，所以需要做鉴权处理，使用方式详见官方手册。因为如果平时用着玩没问题，一旦部署会引起跨域问题，需要后端或平台将接口添加白名单，另外的缺点是不稳定。
H5学习——canvas与屏幕之间的坐标转换
bruce_zhao1407的博客
02-20 2079
在canvas的使用中，经常会用到鼠标进行交互，但是在交互的过程中难免会遇到一些问题，例如，对于一个居中显示的画布，如图所示 众所周知，canvas的绘制过程中，是以画布的左上顶点为原点进行绘制，假如此时使用鼠标点击事件获取画布左上顶点的坐标，得到的结果为 可见，得到的坐标并非是期望中的（0， 0）或者是和（0, 0）相近的值，这是由于鼠标事件是以document的左上角为原点获取坐标的，因此...
前端基础学习之h5-canvas入门5-坐标转换（translate、scale、rotate）
no pains,no gains
01-22 1719
1.直线绘制及绘制折线图 2.矩形绘制及绘制渐变矩形 3.曲线绘制及绘制饼状图 4.图片绘制及绘制帧动画 坐标变换 平移 移动画布的原点 translate(x,y) 参数表示移动目标点的坐标 缩放 坐标轴缩放 scale(x,y) 参数表示宽高的缩放比例 旋转 旋转画布原点 rotate(angle) 参数表示旋转角度 实例 1.translate 变的是坐标的原点位置，而不是绘制物的位置 这里先绘制一个起始位置（100,100），宽300，高300的矩形，再使用trans.
html5定位获取当前位置并在百度地图上显示
05-09
接下来，使用百度地图API初始化地图，并在地图上添加标记： ```javascript var map = new BMap.Map("map"); var point = new BMap.Point(longitude, latitude); map.centerAndZoom(point, 15); // 设置中心点坐标和...
h5实现gps转百度坐标，并显示在地图上
12-31
h5实现定位，gps坐标转百度坐标。精度很高有需要的可以下载。注意测试的时候请在ie上，手机端请在权限管理中给予权限
HTML5获取当前地理位置并在百度地图上展示的实例
11-19
HTML5的Geolocation API是现代Web开发中一个重要...结合以上知识点，开发者可以创建一个实时获取用户位置并在百度地图上展示的应用，提升用户体验。同时，需要注意处理可能的错误情况，以确保应用的稳定性和用户体验。
js+html5获取用户地理位置信息并在Google地图上显示的方法
10-24
主要介绍了js+html5获取用户地理位置信息并在Google地图上显示的方法,涉及html5元素的操作技巧,需要的朋友可以参考下
手机定位GPS并转换百度坐标
12-16
手机定位GPS并转换百度坐标~只有1个HTML文件 全部写在里面了 供学习参考用
H5获取定位后转为百度地图坐标
weixin_30706507的博客
03-19 446
function getLocation() { 　　if(navigator.geolocation) { 　　　　　　var getOption={ 　　　　　　enableHighAccuracy:true, 　　　　　　timeout:8000, 　　　　　　maximumAge:0 　　　　}; 　　　　navigator.geolocation.getCurrentP...
手机端使用H5百度地图定位，并将GPS转换百度地图坐标
小夭的日常分享
03-20 8595
关于手机端根据使用百度地图来进行定位获取相关地理位置信息的基本流程如下：首先，使用H5百度地图验证手机是否支持定位功能，代码如下： if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("该浏览器不支持获取地理位置"); } 如果支持定位的话，
H5获取定位代码，需要部署HTTPS服务器获取定位权限，http服务器无法获取定位权限
WALKMAN的博客
02-26 9510
//获取位置 getLocation(); function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); }el...
HTML5获取地址位置
凯尔斯基的专栏
11-13 6064
通过HTML5的geolocation来获取地理位置，但要注意的是这里获取的原始坐标，直接用该坐标在百度地图上显示不准确，需要进行转换。   一、用HTML5的geolocation获取原始地址 &lt;script type="text/javascript"&gt; function getLocation(){   if (navigator.geolocation){   ...
移动端H5调用高德地图API获取定位ios端问题
fakeeel的博客
08-18 3498
在移动端h5的开发中遇到了使用高德地图的API获取定位的问题。在安卓端没有问题，但在ios上不能正常弹出位置授权窗口。查阅文档并实际尝试后找到如下原因和解决方案。 问题 iOS 11 操作系统的一大特性是对 http 形式访问页面的限制变得非常严格（相比iOS 10 和 iOS 9）。而高德提供的JS API功能均支持http和https两种协议访问，在iOS 11操作系统上推荐使用https形式访问功能页面和接口。 解决方案 先将高德地图的JS API的版本升级到1.4.1版本以上 然
获取定位及附近位置 , 输入框搜索附近位置（三种方法）
weixin_49577940的博客
10-11 6487
本文的两种方法 , 服务器都必须升级到https http的网址无法获取定位, 只能在localhost本地浏览器里获取到 研究这个定位已经研究几天了 , 百度都翻烂了 , 最后还是没搞出来http下怎么获取定位, 如果有知道的大神可以指教一下 先看结果 , 有两个功能 一 : 获取当前定位以及附近位置(高德api直接获取 / 浏览器api获取经纬度再用高德api逆地址解析出具体位置) 二 : 一个输入框可以输入搜索位置 (不是搜索附近的 , 是输入哪里就搜出哪) 测试发现, 用高德ap..
html5实现获取地理位置信息并定位
weixin_34040079的博客
09-13 1095
html5实现获取地理位置信息并定位 一、总结 一句话总结：获取地理位置是分两步：获取经纬度和根据经纬度获取地址信息 a、HTML5的Geolocation（地理位置功能（Geolocation API)）可以获取用户的经纬度 b、第三方插件比如百度地图，谷歌地图可以将上一步获取的经纬度转化为具体的地址信息（google的更加精确）   1、如何通过h5的Geolocation获取用户...
h5 百度地图显示当前位置 并标识出来
09-22
在使用H5技术实现百度地图显示当前位置并标识出来的过程中，可以采取以下步骤： 首先，需要在H5页面的HTML文件中引入百度地图的API，即在<head>标签中添加如下代码： <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script> 然后，在<body>标签内创建一个<div>元素作为地图容器，指定其宽度和高度，如： <div id="map" style="width: 100%; height: 300px;"></div> 接着，在JavaScript文件中编写以下代码来初始化地图并显示当前位置： // 创建地图实例 var map = new BMap.Map("map"); // 设置地图的中心点和缩放级别 var point = new BMap.Point(116.404, 39.915); // 创建中心点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别 // 添加定位控件 var geolocationControl = new BMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 var marker = new BMap.Marker(e.point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 }); geolocationControl.addEventListener("locationError",function(e){ // 定位失败事件 alert(e.message); }); map.addControl(geolocationControl); // 将定位控件添加到地图中 最后，将JavaScript文件引入到HTML文件中，即可在浏览器中打开页面查看地图，并标识出当前位置。 以上是通过H5技术实现百度地图显示当前位置并标识的简要步骤，具体可根据实际需求进行适当调整和优化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值