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

时间:2014-03-10 07:51:52

标签: javascript google-maps google-maps-api-3

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

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

识别分支

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

谢谢。

2 个答案:

答案 0 :(得分:1)

使用Google Maps Geometry Library计算距离。这两个参数都必须是LatLng对象。

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

当然你需要加载几何库

&libraries=geometry

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

答案 1 :(得分:0)

在将新标记添加到地图并推送到数组之前,您需要将该点的纬度和经度值传递给函数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. 这不是一个错误而是被遗忘,当您在for循环中从locations[]数组创建标记时,您还需要将它们推入markers[]数组:markers.push(marker);底部for循环。