谷歌地图测距

最新推荐文章于 2020-05-07 20:02:54 发布

置顶 javaEA7

最新推荐文章于 2020-05-07 20:02:54 发布

阅读量1.7k

点赞数

分类专栏：谷歌地图两点的距离文章标签：谷歌地图测距 js谷歌测两点间的距离 Googel测距谷歌api测距谷歌地图两点的距

本文链接：https://blog.csdn.net/javaEA7/article/details/88570364

版权

谷歌地图两点的距离专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何利用谷歌地图API来测量两点之间的距离，涵盖了JavaScript实现和谷歌地图服务的使用，帮助开发者更好地理解和应用地理定位数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此文档只需加入Google的key和jquery.min.js的文件就可以直接页面看到效果，左击地图标点，第二次左击地图显示终点距离，第三次左击地图是第二次跟第三次的距离，并非伪代码，可直接用

<!DOCTYPE html>
<eteral:html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>两地间距</title>
/*这里加入Google密匙和jquery.min.js文件*/
<script>

	var map;

	function initialize() {
		var CenterLatlng = new google.maps.LatLng(39.921988, 116.417854);
		var mapOptions = {
			zoom : 11,
			center : CenterLatlng,
			mapTypeControlOptions : {
				mapTypeIds : [ google.maps.MapTypeId.ROADMAP,//道路
				google.maps.MapTypeId.HYBRID,//卫星图+地名
				google.maps.MapTypeId.SATELLITE,//卫星
				'localMap' ]
			//定义地图类型
			},
			panControl : true,//平移插件
			zoomControl : true,//缩放插件
			mapTypeControl : true,//地图类型插件
			scaleControl : true,//比例插件
			streetViewControl : false,//街景插件
			overviewMapControl : true//缩略图插件
		}

		var lineSymbol = {
			    path: 'M 0,-1 0,1',
			    strokeOpacity: 1,
			    scale: 4
			};
		
		map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
		map.setMapTypeId(google.maps.MapTypeId.HYBRID); //指定显示道路地图
		map.setOptions({draggable : true});

		//图片源
		var image = 'images/user.png';
		var iii = 'images/iiii.png';
		
		google.maps.event.addListener(map, 'click', function (event) {
            
			//获取点击的经纬度
            var lat1 = event.latLng.lat();
            var lng1 = event.latLng.lng();
			
				//声明谷歌坐标
				var Latlng1 = new google.maps.LatLng(lat1,lng1);

				//声明谷歌标记并加入到地图
				var marker = new google.maps.Marker({
					position : Latlng1,
					map : map,
					title : "",
					animation: google.maps.Animation.DROP
				});
				
			var i = google.maps.event.addListener(map, 'click', function (event){
				//获取点击的经纬度
	            var lat2 = event.latLng.lat();
	            var lng2 = event.latLng.lng();
				//声明谷歌坐标
				var Latlng2 = new google.maps.LatLng(lat2,lng2);
				
				//使用repeat属性，每隔20px重复一次
				var line = new google.maps.Polyline({
				    path: [Latlng1, Latlng2],
				    strokeOpacity: 0,
				    icons: [{
				        icon: lineSymbol,
				        offset: '0',
				        repeat: '20px'
				    }],
				    map: map
				});
				
				//声明谷歌标记并加入到地图
				var marker = new google.maps.Marker({
					position : Latlng2,
					map : map,
					title : "",
					animation: google.maps.Animation.DROP
				});
				
				var lat = []  //纬度
        	    var lng = []  //精度
				
				lat.push(Latlng1.lat());
				lat.push(Latlng2.lat());
				lng.push(Latlng1.lng());
				lng.push(Latlng2.lng());
				
				
				//算俩点的距离
        	    var R = 6378137;
        	    var dLat = (lat[1] - lat[0]) * Math.PI / 180;
        	    var dLng = (lng[1] - lng[0]) * Math.PI / 180;
        	    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat[0] * Math.PI / 180) * Math.cos(lat[1] * Math.PI / 180) * Math.sin(dLng / 2) * 		Math.sin(dLng / 2);
        	    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        	    var d = R * c;  
				
        	    console.log(Math.round(d));  //打印距离
				
				//信息窗口
				var html="<div>终点距离："+Math.round(d)+"米</div>";
				let iw = new google.maps.InfoWindow({content:html});
				iw.open(map, marker);
				i.remove();
			});
        });
		
	
	}
	
</script>
</head>

<body "initialize()">
	<div id="map_canvas"style="left: 0; top: 0; width: 100%; height: 100%; position: absolute;"></div>
</body>

</eteral:html>