如何计算物品到当前位置的距离并在文本中显示? [英] how to calculate distance of an item from current location and show it in a text?
问题描述
我必须在Google地图上围绕特定城市创建一个圆圈，所以我想出了以下代码，它可以正常工作.
I have to create a circle around a particular city on a google map so I came up with below code and it works fine.
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1, p {
margin: 0;
padding: 0;
}
#map_div{
width:400px;
height:400px;
margin: 0 auto;
}
#outer {
width:400px;
height:50px;
margin:0 auto;
text-align:center;
}
#outer input[type="text"] {
display: block;
margin: 0 auto;
}
</style>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="outer">
<input type="text" name="location" value="Current Location"><br>
<div id="map_div"></div>
</div>
</body>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
myMap();
});
function myMap() {
//add global geocoder
window.geocoder = new google.maps.Geocoder();
var mapCanvas = document.getElementById("map_div");
var mapOptions = { zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(33.808678, -117.918921) };
window.map = new google.maps.Map(mapCanvas,mapOptions);
drawCircleAroundCity('ottawa');
}
function drawCircleAroundCity(cityName){
if(!cityName) return;
if(!window.geocoder) throw "Geocoder is not loaded";
window.geocoder.geocode({ 'address': cityName }, function (results, status) {
if (status == 'OK') {
addCircle(results[0].geometry.location, true);
} else {
throw 'Unable to find address: ' + address;
}
});
}
function addCircle(position, recenter){
if(typeof(position) != 'object') return;
if(!window.map) throw "Map is not loaded";
var myCity = new google.maps.Circle({
center: position,
radius: 50000,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.4
});
myCity.setMap(window.map);
if(recenter)
window.map.setCenter(position);
}
</script>
</html>
问题陈述:
现在，我必须找出特定项目与当前位置的距离，并将其显示在Current Location文本框的正上方，如下图所示.我在下面的项目详细信息中有该项目的地址.现在，我们可以使用下面项目的完整地址并计算与Current Location的距离并将其显示在下图所示的文本框上方吗?例如this is 187.51 km away from.我不确定这样做的正确方法.
Now I have to find out distance of a particular item from current location and show it just above the Current Location textbox as shown in this below image. I have below item details in which there is an address of the item. Now can we use the full address of below item and calculate the distance from Current Location and show it above the textbox shown exactly in below image? For example this is 187.51 km away from. I am not sure what is the right way to do that.
这是我的工作 jsfiddle
{
"country": "canada",
"state": "ontario",
"city": "ottawa",
"street": "riverside drive",
"number": "1750",
"postal": "k1g 3t6"
}
推荐答案
使用Google地图的距离API， https://developers.google.com/maps/documentation/distance-matrix/start
Use google map's distance API, https://developers.google.com/maps/documentation/distance-matrix/start
这篇关于如何计算物品到当前位置的距离并在文本中显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
