Javascript 查找与新添加的标记客户服务应用程序最近的标记

我正在开发一个快餐客户服务应用程序。呼叫中心应该能够通过单击已经有旧标记（分支）的地图来添加呼叫者的地址（地图上的标记），并自动根据添加的标记计算最近的分支

我可以将标记添加到数组中，并使用计算函数，但是我需要知道如何在单击事件后调用此函数，并将其连接到添加的新标记。 代码如下

识别分支机构

var map;
var markers = [];
var marker, i;
var locations = [
 ['Title A', 3.180967,101.715546, 1],
 ['Title B', 3.200848,101.616669, 2],
 ['Title C', 3.147372,101.597443, 3],
 ['Title D', 3.19125,101.710052, 4]];

初始化功能

function initialize() {
   var haightAshbury = new google.maps.LatLng(3.171368, 101.653404);
   var mapOptions = {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: google.maps.MapTypeId.TERRAIN
   };

   map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

   google.maps.event.addListener(map, 'click', function(event) {
      addMarker(event.latLng);
   });

   for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
         }
      })(marker, i));

      google.maps.event.addListener(map, 'click', find_closest_marker);

   }
}

function rad(x) {return x*Math.PI/180;}
function find_closest_marker( event ) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
var R = 6371; // radius of earth in km
var distances = [];
var closest = -1;
    for( i=0;i<map.markers.length; i++ ) {
       var mlat = map.markers[i].position.lat();
       var mlng = map.markers[i].position.lng();
       var dLat  = rad(mlat - lat);
       var dLong = rad(mlng - lng);
       var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
       Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
       var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
       var d = R * c;
       distances[i] = d;
       if ( closest == -1 || d < distances[closest] ) {
          closest = i;
       }
    }

alert(map.markers[closest].title);
}

向数组添加新标记

setAllMap(map) 
{
   for (var i = 0; i < markers.length; i++)
   {
      markers[i].setMap(map);
   }
}

setAllMap（map）
{
对于（var i=0；i

计算功能

function initialize() {
   var haightAshbury = new google.maps.LatLng(3.171368, 101.653404);
   var mapOptions = {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: google.maps.MapTypeId.TERRAIN
   };

   map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

   google.maps.event.addListener(map, 'click', function(event) {
      addMarker(event.latLng);
   });

   for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
         }
      })(marker, i));

      google.maps.event.addListener(map, 'click', find_closest_marker);

   }
}

function rad(x) {return x*Math.PI/180;}
function find_closest_marker( event ) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
var R = 6371; // radius of earth in km
var distances = [];
var closest = -1;
    for( i=0;i<map.markers.length; i++ ) {
       var mlat = map.markers[i].position.lat();
       var mlng = map.markers[i].position.lng();
       var dLat  = rad(mlat - lat);
       var dLong = rad(mlng - lng);
       var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
       Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
       var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
       var d = R * c;
       distances[i] = d;
       if ( closest == -1 || d < distances[closest] ) {
          closest = i;
       }
    }

alert(map.markers[closest].title);
}

函数rad（x）{返回x*Math.PI/180；}
函数查找最近的标记（事件）{
var lat=event.latLng.lat（）；
var lng=event.latLng.lng（）；
var R=6371；//地球半径，单位为km
var距离=[]；
var最近值=-1；
对于（i=0；i，在向地图添加新标记并推送到数组之前，您需要将该点的纬度和经度值传递给函数
find\u closest\u marker（）

google.maps.event.addListener(map, 'click', function(event) {
   find_closest_marker( event );
   addMarker(event.latLng);
});

将提醒最近标记的标题

但是，您的代码有一些错误：

您的标记数组只是
标记
，但在
查找最近的标记
中，它是
map.markers[]
，因此您必须将它们更改为
markers[]
在
addMarker（）
中，您使用名称
marker1
定义标记，但将其作为
marker
推送到数组中
这不是一个错误，但已被遗忘，当您在for循环中从
位置[]
数组创建标记时，还需要将它们推入
标记[]
数组：
标记。推（标记）；
for

循环底部 用于计算距离。这两个参数都必须是LatLng对象

google.maps.geometry.spherical.computeDistanceBetween(markerPosition, mainPosition);

当然，您需要加载几何体库

&libraries=geometry

---

中代码的工作示例。最近的标记将在控制台（F12）中打印。注意代码中的注释，所有错误都已修复。

我是否应该同时放置

标记[]和
位置[]
在一个数组中？不，您不会放置
位置
，但是当您在for循环中从
位置
数组创建标记时，您还需要将它们放置在数组
标记
中。按照您的所有步骤操作，它会立即发出“未定义”警报，在检查页面时，我也会收到以下警告“event.returnValue已弃用。请改用标准的event.preventDefault（）。”，您认为问题可能出在哪里？我发现您的标记没有标题，我们正在尝试显示标题。请尝试在警报中显示纬度经度值：
alert（标记[closest].getPosition（）.lat（））
对于latitudeal同样，看看infowindow，您并没有将它们创建为新的infowindow。这行有什么用？
$（document）.ready（函数（）{initialize（）
这个例子在你给我的链接上运行得很好，但是当我在本地主机项目中复制代码时，映射没有显示出来。我不是应该像这样添加库吗
你必须在页面加载时调用
初始化（）；
。这就是
$（document）.ready（函数（）{initialize（）；}）；
对jQuery不起作用。您也可以在脚本标记中简单地调用它。我更新了示例，不使用jQuery。是的，您必须像那样添加库。非常感谢您，这是我加入以来获得的最好支持