百度地图 通过输入实际距离(米) 获取在地图上的像素距离 JavaScript

最新推荐文章于 2024-07-18 10:02:42 发布
置顶 最新推荐文章于 2024-07-18 10:02:42 发布
阅读量4.4k 收藏 3
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y396397735/article/details/80466229
版权
本文介绍了如何利用百度地图API，通过输入实际距离计算地图上两点的像素距离。首先确定两个点的经纬度坐标，然后利用地图接口获取实际距离和像素坐标，最终推导出转换公式，实现米到像素的转换。并提供了相应的JavaScript函数源码。
摘要由CSDN通过智能技术生成

基本思路及求解过程

1、百度地图有获取两点(经纬度)距离的接口

map.getDistance(pointA, pointB);

2、现在我们需要找出两个点的经纬度坐标
(1) 首先pointA选取地图中心点 

var pointA = map.getCenter();

(2) B点坐标采取将pointA纬度+0.001，经度选用pointA的经度（这样基本可以保证这两个点在我们的地图视图中是可以看见的）

var pointB = new BMap.Point(pointA.lng, pointA.lat + 0.001);

3、求出两点的实际距离realDistanceBetween2Points


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  lesliefish
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
2024华为OD机试真题目录汇总 B+C+D卷（484道）（JavaScript语言）

				
			

			

				

					KJ.JK
				

				

					10-10
					
					3万+
					
				

			

		

		

			
				
本文是华为OD机试真题（JS 语言）专栏的目录贴（持续更新中…）华为OD是Outsourcing Dispacth模式，是华为和外企德科联合招聘的简称。目前华为大多数是OD招聘。OD模式也是华为提出的一种新的用工形式，每年都会从OD项目挑优秀员工转为正编。所有OD和正式员工一样对待，没有差别，部门平时开会、评审等活动都是一起参加的，是同薪同酬，都是由华为的HR直接定的薪资，看的是我们技术能力。华为是大企业，能到华为上班也是有能力的，每个部门都有好多职位，是金子，在哪都会发光。

			
		

	



                

              
                



	

		

			

				
					
Javascript与Jquery知识点

				
			

			

				

					weixin_WH841320859的博客
				

				

					01-07
					
					1270
					
				

			

		

		

			
				
前端Javascript与Jquery知识点

			
		

	



                


  
              

                


	

		

			

				
					
百度地图两点之间平滑移动，改变方向(路书)

				
			

			

				

					u013060359的博客
				

				

					05-15
					
					4158
					
				

			

		

		

			
				
新手上路，勿喷，有问题可讨论主要参考和修改了百度地图路书的方法，修改为普通方法使用项目原本是每10秒获取一次gps，所以返回的两个位置会间隔比较大，所以在这两个位置之间参考并修改了路书的方法，在它们之间做了一些平滑的移动，还有修改方向，该文章参考了另外一位博主的文章，传送门：https://www.cnblogs.com/peixuanzhihou/p/6540086.html主要一些方法如下：/...

			
		

	





	

		

			

				
					
C#程序，载入图像，选取其中任意两点，进行像素距离测量和实际距离的转换。

				
			

			

				

					12-13
				

			

		

		

			
				
载入任意图像，在图像上自由选取任意两点，自动测量图像的像素距离（pixel）和进行实际距离（mm）的转换程序，C#写的，导入VS项目中直接运行可见效果。

			
		

	



		

			
		



	

		

			

				
					
百度地图计算不同等级像素与实际距离比

				
			

			

				

					dk123sw的博客
				

				

					12-29
					
					5271
					
				

			

		

		

			
				
 本篇使用两种方式计算像素与实际距离比，两种方式都是根据百度地图提供的方法、信息计算。

第一种

 利用getDistance、pointToOverlayPixel计算两坐标的像素位置以及真实距离进而推算像素与实际距离比。


            var pointA = r.point;
            var pointB = new BMap.Point(pointA.lng...

			
		

	





	

		

			

				
					
单目相机标定：由图像像素坐标系距离到世界坐标系真实距离

				
			

			

				

					ereqewe的博客
				

				

					11-30
					
					4148
					
				

			

		

		

			
				
通过单目相机标定，计算物体实际长度

			
		

	





	

		

			

				
					
屏幕上1像素代表的实际距离是多少？

				
			

			

				

					weixin_46721670的博客
				

				

					01-05
					
					7613
					
				

			

		

		

			
				
.屏幕上1像素代表的实际距离是多少？
在计算瓦片的行列号之前，我们需要得到图上一像素代表实际距离多少米。现在假设地图的坐标单位是米，dpi为96 ；
1英寸=2.54厘米；
1英寸=96像素；
最终换算的单位是米；
如果当前地图比例尺为1:125000000，则代表图上1米等于实地125000000米；
米和像素间的换算公式：
1英寸=0.0254米=96像素
1像素=0.0254/96 米
则根据1：125000000比例尺，图上1像素代表实地距离是 125000000*0.0254/96 = 33072

			
		

	





	

		

			

				
					
C#调用百度地图API经验分享（四）

				
			

			

				

					追
				

				

					03-12
					
					3万+
					
				

			

		

		

			
				
这一篇，记录一下我调用的地图API实现的功能。下面介绍的都是一些片段的节选，不能直接复制就运行。在实现之前肯定要加载地图，先放一个webbroser控件，然后如下：
private void Form1_Load(object sender, EventArgs e)
        {

            string str_url = Application.StartupPa

			
		

	





	

		

			

				
					
屏幕测量工具（两点间的像素距离）

				
			

			

				

					07-21
				

			

		

		

			
				
这个程序是我在做网页时为了测量元素的尺寸而做的，用VB6写的一个简单的应用，测量两点间的像素距离。

点击[开始]后，鼠标按住为第一个点，放开为第二个点，并显示结果。

[结果]框内，第一个文本框是第一个点的屏幕位置，第二个文本框是第二个点的屏幕位置。
第二行的W是水平距离，H是垂直距离，L就是两点的距离了。

[换算]框里第一个填换算率，第二个填单位。

以前在公司匆忙做的，很多功能没有，比如用一个放大镜取点等，自己凑合用用还是不错的。

			
		

	





	

		

			

				
					
百度地图API参考类

				
			

			

				

					01-12
				

			

		

		

			
				
百度地图API中所有的参考类，对每个函数，每个事件都有详细的说明.是个工具类的教程说明.pdf

			
		

	





	

		

			

				
					
openlayer 框架

					
最新发布

				
			

			

				

					qq_26887683的博客
				

				

					07-18
					
					742
					
				

			

		

		

			
				
openlayer框架 说明文档

			
		

	





	

		

			

				
					
37.百度地图经纬度转换为指定view的屏幕坐标（像素点）

				
			

			

				

					蝶飞花已醉的博客
				

				

					09-01
					
					2713
					
				

			

		

		

			
				
/**

 *将经纬度坐标转换为View坐标

 *@param coordinate 待转换的经纬度坐标

 *@param view 指定相对的View

 *@return 转换后的View坐标

 */

- (CGPoint)convertCoordinate:(CLLocationCoordinate2D)coordinate toPointToView:(UI

			
		

	





	

		

			

				
					
百度地图---绘制圆时实时显示圆半径

				
			

			

				

					Coder_Qiang的博客
				

				

					08-08
					
					1万+
					
				

			

		

		

			
				
百度地图—绘制圆时实时显示圆半径

			
		

	





	

		

			

				
					
百度地图静态图之坐标转换

				
			

			

				

					一切没有被记录的，终将被遗忘
				

				

					12-26
					
					4007
					
				

			

		

		

			
				
百度地图的坐标转换，在javascript版本中，已经提供了很强大的装换，由于项目中需要在百度地图上打的标注以及线路等自定义覆盖物数量较大，而百度的标注最多只能支持400个左右（个人测试），超过400就会加载很慢或者IE卡死，所以，不得已，使用了百度的静态图，这样就引发出了一个问题，静态图只是一张图片，实际上并没有javascript中的BMap对象，经纬度的转换比较的蛋疼，故总结了一套静态图上的

			
		

	





	

		

			

				
					
百度地图 - 自定义ECharts覆盖物

				
			

			

				

					小小的前端
				

				

					02-14
					
					1446
					
				

			

		

		

			
				
简介
在开发地图可视化页面时，产品想在城市的对应位置展示一个统计图。这时候先不要慌，大声的说你是在哪抄的这个需求。好看到页面了，就没有前端人不会（抄的）开发的。研究后发现使用的是，百度地图api自定义了ECharts覆盖物。
覆盖物

在百度地图中所有的覆盖物都继承Overlay，所以我们通过继承基类实现自定义覆盖物。


initialize()，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。
draw()，当地图状态发生变化时，由系统调用对覆盖物进行绘制。
show()，显

			
		

	





	

		

			

				
					
百度地图坐标系统解析

					
热门推荐

				
			

			

				

					二十同学
				

				

					06-22
					
					7万+
					
				

			

		

		

			
				
我们都知道地球是圆的，电脑显示器是平的，要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程，这个过程就叫做投影（Projection）。在地球上我们通过经纬度来描述某个位置，而经过投影之后的地图也有自己的坐标系统，本篇文章就来详细介绍在百度地图API中涉及的各种坐标体系。

在百度地图API中，你需要了解如下坐标系：

经纬度：通过经度（longitude）和纬度（la...

			
		

	





	

		

			

				
					
如何在vue中使用百度地图添加自定义覆盖物（水波纹）动画效果

				
			

			

				

					cc蒲公英的博客
				

				

					09-07
					
					3164
					
				

			

		

		

			
				
如何在vue中使用百度地图添加自定义覆盖物（水波纹）动画效果

			
		

	





	

		

			

				
					
百度地图API使用教程：从获取密钥到创建地图

				
			

			

				

					
				

			

		

		

			
				
百度地图API是一个强大的工具，允许开发者在自己的应用或网站上集成地图功能。要开始使用百度地图API，首先需要获取一个API密钥。这个密钥是百度地图服务的访问令牌，确保你的应用能够合法调用其提供的各种服务。你...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值