javascript - 我如何计算点之间的距离 Google Maps Api V3

标签 javascript google-maps

我正在做一个项目,它即将完成。问题是我对 Javascript 还很陌生,不知道如何做一些可能非常简单的事情。这是我的代码的一部分:

var dista;
var p;
var addrbounds;
var addrlat;
var addrlng;
var addr;

var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/red.png",

new google.maps.Size(32, 32), new google.maps.Point(0, 0),

new google.maps.Point(16, 32));

var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng, info) {

var address = document.myform.customer.value;
var geocoder = new google.maps.Geocoder();

geocoder.geocode({address: address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

var addrbounds = results[0].geometry.location; //get geocoded results into variable
var addrlat = results[0].geometry.location.lat();
var addrlng = results[0].geometry.location.lng();
var p = new google.maps.LatLng(addrlat, addrlng);
var pt1 = new google.maps.LatLng(lat, lng);

dista = pt1.distanceFrom(p); //calculate distance between the points

var di = (dista/1000);

document.myform1.memory.value = di; //add dist to memory text box

return;

} else {

alert(address + ' not found');

}

});

// desired spot for if statement regarding distance

var pt = new google.maps.LatLng(lat, lng);

bounds.extend(pt);

var marker = new google.maps.Marker({

position: pt,

icon: icon,

map: map

});

var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300

});

google.maps.event.addListener(marker, "click", function() {

if (currentPopup != null) {

currentPopup.close();
currentPopup = null;

}

popup.open(map, marker);

currentPopup = popup;

});

google.maps.event.addListener(popup, "closeclick", function() {

map.panTo(center);

currentPopup = null;

});

}

基本上,addMarker() 函数中发生的第一件事是对地址进行地理编码,然后计算距该地址的距离。效果很好。当想要获取地理编码器的距离以创建 if 语句以仅在特定半径内添加来自数据库的标记时,就会出现问题。如您所见,我尝试将其移动到文本框。这似乎有效,但它是循环的一部分,并且不会随着循环的每次运行而更新。

我已经被困了几天了,所以我们将不胜感激。我讨厌如此接近完成但却卡住了!

编辑:

我让它工作了。我就是这样做的:

var dista;    

var p;

var addrbounds;

var addrlat;

var addrlng;

var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/red.png",

new google.maps.Size(32, 32), new google.maps.Point(0, 0),

new google.maps.Point(16, 32));

var center = null;

var map = null;

var currentPopup;

var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng, info) {    

var address = document.myform.customer.value;

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

geocoder.geocode({address: address}, function(results, status) {

  if (status == google.maps.GeocoderStatus.OK) {

  var addrbounds = results[0].geometry.location;

  var addrlat = results[0].geometry.location.lat();

  var addrlng = results[0].geometry.location.lng();

  var p = new google.maps.LatLng(addrlat, addrlng);

  var pt1 = new google.maps.LatLng(lat, lng);

  dista = pt1.distanceFrom(p);

  var di = (dista/1000);

  document.myform1.memory.value = di;

  document.myform1.memory1.value = addrlat;

  document.myform1.memory2.value = addrlng;

  return;

} else {

  alert(address + ' not found');

}

 });

var tstlat = document.myform1.memory1.value;

var tstlng = document.myform1.memory2.value;

var tstpt = new google.maps.LatLng(tstlat, tstlng);

var pt = new google.maps.LatLng(lat, lng);

var distan = pt.distanceFrom(tstpt);

var tstdistance = (distan/1000);

if (tstdistance < 20){

// alert (tstdistance);

bounds.extend(pt);

var marker = new google.maps.Marker({

position: pt,

icon: icon,

map: map

});

var popup = new google.maps.InfoWindow({

content: info,

maxWidth: 300

});

google.maps.event.addListener(marker, "click", function() {

if (currentPopup != null) {

currentPopup.close();

currentPopup = null;
}  
popup.open(map, marker);

currentPopup = popup;

});

google.maps.event.addListener(popup, "closeclick", function() {

map.panTo(center);

currentPopup = null;

});

}

else

 {

 return;

 }}

现在我只需要解决 map 刷新问题,然后项目就完成了!

最佳答案

您无法从地理编码器回调中获取任何内容,地理编码会强制异步请求,您永远不会从回调外部得知响应何时到达。

您必须从回调中推送某些内容到外部,而不是从外部获取某些内容(正如您已经通过设置文本框的值完成的那样)。您还可以从回调中调用另一个函数并提供距离作为参数。

关于javascript - 我如何计算点之间的距离 Google Maps Api V3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9608444/

相关文章:

javascript - 单击 JavaScript 中的自定义 CSS 按钮后恢复悬停状态?

javascript - jquery show() 函数后谷歌地图未加载

ios - 在谷歌地图上关注用户位置

google-maps - Google Maps v3 中的弹性标记

javascript - <链接> 为 "react-router-dom 6.7.0"

javascript - 错误的 ELF 类 - Python

javascript - 如何在页面重定向后打开jquery ui模式

ios - 您已超出此 API 的每日请求配额。 Google Places API iOS swift

android - 我可以在中国使用 Google Maps API吗

javascript - 即使事件未执行,事件监听器也会立即触发