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 相关文章推荐
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
vue实现评论列表功能
Oct 25 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python3 flask实现文件上传功能
2020/03/20 Python
python多线程http压力测试脚本
2019/06/25 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
偷看我的初中毕业鉴定
2014/01/29 职场文书
主管会计岗位责任制
2014/02/10 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
招股说明书范本
2014/05/06 职场文书
安全生产宣传标语
2014/06/06 职场文书
博士生导师推荐信
2014/07/08 职场文书
高一军训决心书
2015/02/05 职场文书
文明礼仪倡议书
2015/04/28 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python