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 相关文章推荐
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
javascript简单链式调用案例分析
May 10 Javascript
简单的网页广告特效实例
Aug 19 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
JavaScript实现单点登录的示例
Sep 23 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php分页函数
2006/07/08 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue实现分页组件
2020/06/16 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
python字典的常用操作方法小结
2016/05/16 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Keras自定义IOU方式
2020/06/10 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
银行职员思想汇报
2013/12/31 职场文书
中学自我评价
2014/01/31 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
中学生操行评语大全
2014/04/24 职场文书
体育之星事迹材料
2014/05/11 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
学生通报表扬范文
2015/05/04 职场文书
植物园观后感
2015/06/11 职场文书
光荣之路观后感
2015/06/12 职场文书
600字作文之感受大自然
2019/11/27 职场文书