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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
vue-router 控制路由权限的实现
Sep 24 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
房地产出纳岗位职责
2013/12/01 职场文书
给学校的建议书
2014/03/12 职场文书
服装采购员岗位职责
2014/03/15 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Ruby处理YAML和json数据
2022/04/18 Ruby