百度地图拖动点 获取当前坐标，和位置信息。

最新推荐文章于 2022-08-30 18:52:45 发布
最新推荐文章于 2022-08-30 18:52:45 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42957741/article/details/111047749
版权

copy就能用的，改上你自己的秘钥。
安卓手机获取当前定位是不准确的，ios可以，上一篇博客有说怎样获取当前精准定位感兴趣的小伙伴可以去看下
获取用户当前位置精准定位亲测有效。
在这里插入图片描述

<!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" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        .button-full{
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;
            height: 50px;
            width: 100%;
            line-height: 50px;
            font-size: 16px;
            text-align: center;
            color: #fff;
            background: #333;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你的秘钥"></script>
    <title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
    <a id="chosedBtn" class=" button-full">选择这个地址</a>
</body>
<script type="text/javascript">
    //创建默认初始化Map实例
    (function(){
         
        mapObj = {
            com: {
                map : new BMap.Map("allmap"),
                infoWindow :  new BMap.InfoWindow("正在载入..", {offset : new BMap.Size(10, -60)}),
                icon: new BMap.Icon("./address.png", new BMap.Size(60, 60)),
                iconOffsetSize: new BMap.Size(0, -20),
                chosedAddr: ""
            },
             
            init: function(){
                var _this = this;
 
                _this.default();
 
                _this.initLocation().then(function(result){
                    //清除掉默认的markerDefault
                    _this.com.map.clearOverlays()
 
                    var marker = result.mk;
                    var point = result.pt;
 
                    //取得当前位置的名字
                    _this.getAddrAccordingPoint(point).then(function(res){
                        _this.changeInfoWindowContent(res)
                        //打开信息窗体
                        _this.com.map.openInfoWindow(_this.com.infoWindow, point); 
                    });
                    
                    //绑定拖动结束事件，获取经纬度
                    marker.addEventListener("dragend", function(){
                        var curPoint = marker.getPosition();
                        console.log(curPoint)   
                        //取得拖动后当前位置的名字
                        _this.getAddrAccordingPoint(curPoint).then(function(res){
                            _this.changeInfoWindowContent(res)
                            //打开信息窗体
                            _this.com.map.openInfoWindow(_this.com.infoWindow, curPoint); 
                        });
                    });
                    marker.addEventListener("click", function(){ 
                        var curPoint = marker.getPosition();
                        _this.getAddrAccordingPoint(curPoint).then(function(res){
                            _this.changeInfoWindowContent(res)
                            //打开信息窗体
                            _this.com.map.openInfoWindow(_this.com.infoWindow, curPoint); 
                        })
                    });
                })
            },
 
            //默认打开地图的初始状态设置
            default: function(){
                var _this = this;
                var point = new BMap.Point(114.062048, 22.54579);
                // 设置初始化地图,设置中心点坐标和地图级别
                _this.com.map.centerAndZoom(point, 12); 
 
                //设置初次打开时，markerDefault，定位初始完毕会被销毁
                var markerDefault = new BMap.Marker(point);
                _this.com.map.addOverlay(markerDefault);
                markerDefault.setIcon(_this.com.icon);
 
                //设置信息窗体宽度
                _this.com.infoWindow.setWidth(220);
            },
 
            //獲取定位初始化地圖
            initLocation: function (){
                var _this = this;
                return new Promise(function(resolve, reject){
                    new BMap.Geolocation().getCurrentPosition(function(r){
                        var lat = r.latitude;
                        var long = r.longitude;
                        var point = new BMap.Point(long, lat)
 
                        var marker = new BMap.Marker(point);
                        marker.setOffset(_this.com.iconOffsetSize)
                        marker.setIcon(_this.com.icon);
                        marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 图标跳动， 只是用pc端，移动端失效
                        var initObj = {
                            pt: point,
                            mk: marker
                        }
 
                        // 将标注添加到地图中
                        _this.com.map.addOverlay(marker);
                         
 
                        //允许拖动           
                        marker.enableDragging();
                        //不允许被clearOverlays方法清除
                        marker.disableMassClear();
 
                        //地图指向当前的点（平移动画）
                        _this.com.map.panTo(point);
                        // 初始化地图,设置中心点坐标和地图级别
                        _this.com.map.centerAndZoom(point, 16); 
 
                        resolve(initObj);
                    })
                })
            },
 
            //根据经纬度解析出位置的名称
            getAddrAccordingPoint: function(point){
                var _this = this;
                return new Promise(function(resolve, reject){
                    new BMap.Geocoder().getLocation(point, function(result){     
                        if (result){     
                            if(!!result.surroundingPois[0]){
                                _this.com.chosedAddr = result.address + " " +result.surroundingPois[0].title; 
                            }else{
                                _this.com.chosedAddr = result.address; 
                            }
                            resolve(_this.com.chosedAddr)
                        }     
                    });
                })
            },
 
            //添加标注地址信息
            changeInfoWindowContent: function(content){
                var _this = this;
                _this.com.infoWindow.setContent(content);
            }
        };
 
        //开始地图
        mapObj.init();
 
        // document.getElementById('chosedBtn').addEventListener('click', function(){
        //     location.href = '<{:U("Channel/addChannelFollowLog")}>?address='+mapObj.com.chosedAddr
        // },false)   
         
    })()
</script>
</html>

在这里插入图片描述

邱志刚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图android获取地图中心点,拖动地图获取中心点坐标（百度地图3.0+）
weixin_39837124的博客
05-26 978
packagebaidumapsdk.demo;importandroid.app.Activity;importandroid.os.Bundle;importandroid.widget.TextView;importcom.baidu.location.BDLocation;importcom.baidu.location.BDLocationListener;importco...
百度地图 定位，地图中心坐标，拖动后获取地图中心点坐标，poi搜索
anis_suhao的博客
06-14 3786
功能相关 1.缩放一到多个坐标到屏幕内2.拖动后获取屏幕中心点
百度地图api--拖动地图显示经纬度与显示当前位置
叶少翔
11-04 2558
一.首先引入所申请的ak密钥 二.简单样式处理一下body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap{height:100%;width:100%;}#map span{display:block; width:20px; height:32px;background:url(http://wx.58ha
android 百度地图滑动获屏幕中心坐标和显示当前地址信息
01-19
android 百度地图滑动获屏幕中心坐标和显示当前地址信息
百度地图实现拖动图标输入地址
fuge2008的博客
07-12 475
一，Activity代码public class SaasLocationActivity extends BaseActivity implements OnGetGeoCoderResultListener, OnGetPoiSearchResultListener, View.OnClickListener { private static String TAG = SaasLocat...
基于百度API地图获取位置代码.zip
07-11
5. **拖拽获取坐标**：在地图上添加监听事件，当用户拖拽地图时，可以获取当前鼠标所在位置的坐标。 6. **显示坐标**：将获取到的地理位置坐标（经纬度）显示在页面上，方便开发者使用。 7. **安全处理AK**：确保...
iOS实现百度地图拖拽后更新位置以及反编码
08-28
在`FTBasicController.h`中，可以看到`#import`了相关的百度地图SDK头文件，如`BMKLocationService`、`BMKUserLocation`、`BMKMapView`等，这些都是百度地图API的核心组件，用于处理地图显示、用户位置获取和地理...
基于百度地图 拖动选择位置 搜索选择位置
04-23
5. **定位服务**: 应用可能需要获取用户的当前位置，这需要调用百度地图API的定位服务。在用户同意的情况下，应用可以获取到精确的GPS坐标，并将其作为地图的初始中心点或者用于搜索附近的地点。 6. **覆盖物与标记...
百度地图滑动后获取屏幕的中心点百度坐标
yangxf
03-03 7310
//地图状态改变相关接口 mBaiduMap.setOnMapStatusChangeListener(new OnMapStatusChangeListener() { @Override public void onMapStatusChangeStart(MapStatus arg0) { // 手势操作地图，设置地图状态等操作导致地图状态开始改变。 }
百度地图的定位以及拖拽（显示坐标位置）
热门推荐
Rick
01-08 1万+
截图示例                           html{height:100%}             body{height:100%;margin:0px;padding:0px}             #map_canvas{             margin:0 auto;             bo
移动地图时自动获取当前地图中心地区
weixin_34208185的博客
02-09 282
原文链接：Bougie的博客 问题来源 使用百度地图时，移动地图,我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。对此，我仿写了一个计算地图当前区域的方法。 解决思路 地图整个屏幕是一个矩形，为了方便计算，我们可以把地图每个城市也看成矩形，即为城市的Extent或BBox。如图所示。分析当前屏幕每个区域的面积占比即可获取当...
百度地图web--拖拽选址
秋霜梦红尘的博客
06-29 633
实现思路 获取地图的中点经纬度。 获取地图拖拽回调事件。 将大头针图片底部固定在地图的正中央。 引用百度地图sdk、 在index.html中引用 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度ak"></script> 组件中实现地图 map 是地图； center-point 是打头针； point 是标示地图中点位置； 代码如下： <template
使用百度地图实现拖动定位、搜索定位
若先设计
07-29 6021
该代码主要的技术点： ==>获取百度地图key，也就是ak; ==>拖动定位，经纬度、详细地址 ==>搜索定位，根据所搜索得地址进行地图地位，精确定位。 具体的实现代码： !DOCTYPE html> html> head>     meta charset="utf-8">     title>title>     link href="../bootstrap/css/bo
百度地图之定位+移动选址
力学不知疲
01-29 6279
转载自: http://blog.csdn.net/y1scp/article/details/49095729 百学须先立志---学前须知： 我们经常在各大主流APP上要求被写上地址，如百度外卖、爱鲜蜂收货地址等等；其中他们大多数是可以让我们在地图上移动选址。就如下面这段GIF演示的一样： 尽信书，不如无书---能学到什么？ 1、地图状态MapStatus类
百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置
weixin_30813225的博客
03-12 266
先看下效果图，因为没有美化，只是做一下功能。 完整代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, u...
vue引入百度地图api实现marker拖动的效果
m0_60796787的博客
08-30 901
因为我做这个的时候遇见的问题有点多 文档上面的也不是很详细 对于小白来说真的是有点难度 但是你的产品经理在旁边催你的时候 你也没办法 你的朋友们也许也有自己的工作 这时候就可以看看我的这编文章 希望可以帮助到你 有啥问题可以问我 知无不言，言无不尽。把这个id给到label给到之后就可以在你的点位上面有个数字这个就是你的id了，然后将它隐藏 最后把这个label加到你的marker数组里面 我的是markerRendering 这样你的marker就有id了。3.怎么给marker添加id呢？...
基于百度地图的地理位置选择功能 （搜索）
u010507199的专栏
10-16 869
http://blog.csdn.net/w804518214/article/details/48893595（转）                                                                                                                                        
android百度地图 模糊查询,百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置...
weixin_36283702的博客
05-26 596
先看下效果图，因为没有美化，只是做一下功能。 完整代码如下百度地图的定位input{border:1px solid #dddee1;border-radius:5px;height:30px; width:90%;}当前位置：请输入:// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(118.778, 3...
百度地图getpoint获取批量坐标
最新发布
06-20
### 回答1： 百度地图getpoint是一个用于获取批量坐标的...总之，百度地图getpoint提供了多种方式来获取批量坐标，极大地方便了用户在进行地图位置定位和数据分析等方面的工作，帮助用户更高效地完成地图相关的任务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值