调用google map API获取经纬度，获取地址信息，获取两地距离

最新推荐文章于 2024-09-14 13:45:29 发布

qingyue32

最新推荐文章于 2024-09-14 13:45:29 发布

阅读量5.9k

点赞数 2

分类专栏： GoogleMap 文章标签：地图 google地图

本文链接：https://blog.csdn.net/qingyue32/article/details/80019209

版权

GoogleMap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html {
height: 100%
}

body {
height: 100%;
margin: 0;
padding: 0
}

#map-canvas {
height: 100%
}
</style>

<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var cicles = new Array();//所有圆集合
var map;
//初始化地图位置，暂定为西安，缩放级别暂定为省级
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myState = new google.maps.LatLng(34.33323229739093, 109.0034999506496);

var mapOptions = {
center: myState,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);

//位置选取
google.maps.event.addListener(map, 'click', function (event) {
if (event) {
createCircle(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()), 500, 800, map);
}
});

//空白处右键点击，取消选中位置
google.maps.event.addListener(map, 'rightclick', function (event) {
if (event) {
cicles.pop().remove();
}
});
}

var singleClick = false;
//页面展示框
var infowindow = new google.maps.InfoWindow({
content: ""
});

/**
* 画圆的类
*/
function GeoQuery() {
}

GeoQuery.prototype.initializeCircle = function (radius1, radius2, point, map) {
this._type = this.CIRCLE; //圆形
this._radius1 = radius1; //半径1
this._radius2 = radius2; //半径2
this._map = map; //地图

//计算扩大圆的点的位置
var distance1 = this._radius1 / 1000;
var newPoint = destination(point, 180, distance1);
distance1 = distance(point, newPoint);

this._dragHandlePosition = destination(point, 90, distance1);
//设置扩大圆的点的样式
this._dragHandle = new google.maps.Marker({
position: this._dragHandlePosition,
map: map,
draggable: true,
icon: "resizeArrow.png"
});
//中心点的位置
this._centerHandlePosition = point;
//设置中心点的样式
this._centerHandle = new google.maps.Marker({
position: this._centerHandlePosition,
map: map,
draggable: true,
flat: false
});

//在地图上加载圆形
this._dragHandle.setMap(map);
this._centerHandle.setMap(map);

var myObject = this;
//扩大圆的点的拖拽事件
google.maps.event.addListener(myObject._dragHandle, 'drag', function () {
myObject.updateCircle(1);
});

//跳出的infowindow
google.maps.event.addListener(myObject._dragHandle, 'drag', function () {
myObject.updateCircle(1);
});

GeoQuery.prototype.CIRCLE = 'circle'; //画的形状
GeoQuery.prototype.COLORS = ["#0000ff", "#00ff00", "#ff0000"]; //圆的颜色
var COLORI = 0; //默认颜色为0

GeoQuery.prototype = new GeoQuery();
GeoQuery.prototype._map;
GeoQuery.prototype._type;
GeoQuery.prototype._radius;
GeoQuery.prototype._dragHandle;
GeoQuery.prototype._centerHandle;
GeoQuery.prototype._polyline1;
GeoQuery.prototype._polyline2;
GeoQuery.prototype._color;
GeoQuery.prototype._control;
GeoQuery.prototype._points1;
GeoQuery.prototype._points2;
GeoQuery.prototype._dragHandlePosition;
GeoQuery.prototype._centerHandlePosition;
GeoQuery.prototype.markers;
GeoQuery.prototype.centers;
GeoQuery.prototype.polylines;

var geocoder = new google.maps.Geocoder();

var locationListener = "";
//圆的中心点的点击事件
google.maps.event.addListener(myObject._centerHandle, 'click', function () {

geocoder.geocode({'location': posLocation}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0].address_components[0].long_name == "Unnamed Road") {
locationListener = results[0].address_components[4].long_name + results[0].address_components[3].long_name + results[0].address_components[2].long_name + results[0].address_components[1].long_name;
} else {
locationListener = results[0].address_components[4].long_name + results[0].address_components[3].long_name + results[0].address_components[2].long_name + results[0].address_components[1].long_name + "," + results[0].address_components[0].long_name;
}
console.log("当前地址：" + locationListener);
infowindow.setContent("当前位置：" + locationListener + "<br/>经度：" + posLocation.lat() + "<br/>纬度：" + posLocation.lng());
//将选取的地址写入input框
var startPlace = document.getElementById("start").value;
var endPlace = document.getElementById("end").value;
if (startPlace == "") {
document.getElementById("start").value = locationListener;
}
if (startPlace != "" && endPlace == "") {
document.getElementById("end").value = locationListener;
}
}
else {
locationListener = "";
console.log('error');
}
});
infowindow.open(myObject._centerHandle.get('map'), myObject._centerHandle);
});

//圆的中心点的拖拽事件
google.maps.event.addListener(myObject._centerHandle, 'drag', function () {
myObject.updateCircle(2);
});
}

//位置选取时画圆，暂时不画圆
function createCircle(point, radius1, radius2, map) {
singleClick = false;
var geoQuery = new GeoQuery();
geoQuery.initializeCircle(radius1, radius2, point, map);
//cicles.push(geoQuery);
}

/**
*
* 圆的删除
*
*/
GeoQuery.prototype.remove = function () {
this._polyline1.setMap(null);
this._polyline2.setMap(null);
this._dragHandle.setMap(null);
this._centerHandle.setMap(null);
}

var posLocation;
/**
*计算直线距离
* 算法:通过原点、角度和距离计算目标点的坐标
* orig:原点坐标
* hdng:角度
* dist:原点的到目标点的距离
* @return 目标点坐标
*
*/
function destination(orig, hdng, dist) {
var R = 6371; // earth's mean radius in km
var oX, oY;
var x, y;
var d = dist / R; // d = angular distance covered on earth's surface
hdng = hdng * Math.PI / 180; // degrees to radians
oX = orig.lng() * Math.PI / 180;
oY = orig.lat() * Math.PI / 180;

y = Math.asin(Math.sin(oY) * Math.cos(d) + Math.cos(oY) * Math.sin(d) * Math.cos(hdng));
x = oX + Math.atan2(Math.sin(hdng) * Math.sin(d) * Math.cos(oY), Math.cos(d) - Math.sin(oY) * Math.sin(y));

y = y * 180 / Math.PI;
x = x * 180 / Math.PI;
posLocation = new google.maps.LatLng(y, x);
return new google.maps.LatLng(y, x);
}

//计算距离
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
infowindow.setContent("当前位置：" + "<br/>经度：" + posLocation.lat() + "<br/>纬度：" + posLocation.lng()+"距离："+result["routes"][0].legs[0].distance.text);
console.log(result["routes"][0].legs[0].distance.text);
}
});
}

/**
* 算法:计算两个坐标点的距离
* point1:坐标点1
* point2:坐标点2
* @return 两点的距离
*/
function distance(point1, point2) {
var R = 6371; // earth's mean radius in km
var lon1 = point1.lng() * Math.PI / 180;
var lat1 = point1.lat() * Math.PI / 180;
var lon2 = point2.lng() * Math.PI / 180;
var lat2 = point2.lat() * Math.PI / 180;

var deltaLat = lat1 - lat2
var deltaLon = lon1 - lon2

var step1 = Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(lat2) * Math.cos(lat1) * Math.pow(Math.sin(deltaLon / 2), 2);
var step2 = 2 * Math.atan2(Math.sqrt(step1), Math.sqrt(1 - step1));
return step2 * R;
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div>
<strong>起点: </strong>
<input type="text" id="start"/>
<strong>终点: </strong>
<input type="text" id="end"/>
<button type="button" οnclick="calcRoute()">去这里</button>
</div>

<div id="map-canvas"/>
</body>
</html>