找到最近的标记到一个新的标记添加客户服务应用程序

Find the closest marker to a new marker added Customer Service app

本文关键字：添加 客户服务 应用程序 一个 最近      更新时间：2023-09-26

我正在研究一个快餐客户服务应用程序呼叫中心应该能够通过点击已经有旧标记(分支机构)的地图来添加呼叫者的地址(地图上的标记)，并且它应该自动计算从添加的标记最近的分支机构。

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

标识分支 

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]];

Initialization function

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 addMarker(location) {
   var marker1 = new google.maps.Marker({
      position: location,
      map: map
   });
   markers.push(marker); 
}

为数组添加新的标记

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

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);
}

谢谢。

使用Google Maps Geometry Library计算距离。

参数必须为LatLng对象。
google.maps.geometry.spherical.computeDistanceBetween(markerPosition, mainPosition);

当然你需要加载几何库

&libraries=geometry

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

在添加新的标记到映射并压入数组之前，您需要将该点的纬度和经度值传递给函数find_closest_marker()。

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

将提示最近的标记的标题。

然而，你的代码有几个错误:
  1. 您的标记数组只是markers，但在find_closest_marker中，它是map.markers[]，所以您必须将它们更改为markers[]。
  2. 在addMarker()中，您定义了名称为marker1的标记，但将其推送到数组为marker。
  3. 不是一个错误，但忘记了一个，当你从你的locations[]数组创建标记在for循环，你还需要把它们推到你的markers[]数组:markers.push(marker);在for循环的底部。
相关文章：