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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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
2014最热门的24个php类库汇总
2014/12/18 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
domReady的实现案例
2016/11/23 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
Linux如何为某个操作添加别名
2015/02/05 面试题
违纪检讨书2000字
2014/02/08 职场文书
总经理工作职责范文
2014/03/14 职场文书
党员教师一句话承诺
2014/05/30 职场文书
天地会口号
2014/06/17 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
2015年科室工作总结
2015/04/10 职场文书
2016年寒假家长评语
2015/10/10 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python