Javascript计算两个marker之间的距离(Google Map V3)


Posted in Javascript onApril 26, 2013

Google Map V3 javascript计算两个marker之间的距离
做地图开发,最常用到的就是marker一些操作和交互。简单介绍一下,两个marker之间的距离计算。
google map api 很方便的 只要是常用的 基本上都有接口。
1.创建两个marker点

var oldMarker = new google.maps.Marker({ 
position: new google.maps.LatLng("31.95678", "177.898673"), 
map: map, 
title:"old" 
}); 
var newMarker = new google.maps.Marker({ 
position: new google.maps.LatLng("31.45678", "177.098673"), 
map: map, 
title:"new" 
});

2.加载geometry库
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

说明:libraries=geometry
3.计算距离
var meters = google.maps.geometry.spherical.computeDistanceBetween(oldMarker.getPosition(), newMarker.getPosition()); 
document.getElementById("distance").innerText = meters+"米";

说明:单位是米
oldMarker.getPosition() 获取oldmarker的当前位置(经纬度)
Javascript 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
Element Input组件分析小结
Oct 11 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
jquery中.add()的使用分析
Apr 26 #Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 #Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 #Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 #Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 #Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 #Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 #Javascript
You might like
通过html表格发电子邮件
2006/10/09 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
PHP 文件上传限制问题
2019/09/01 PHP
php DES加密算法实例分析
2019/09/18 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python使用range函数计算一组数和的方法
2015/05/07 Python
python 网络编程详解及简单实例
2017/04/25 Python
python实现泊松图像融合
2018/07/26 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
老干部工作先进集体事迹材料
2014/05/21 职场文书
2014年保卫工作总结
2014/12/05 职场文书
计划生育个人总结
2015/03/02 职场文书
公积金具结保证书
2015/05/11 职场文书
晚会开幕词范文
2016/03/04 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏