如何将 LatLng 对象与数组中的另一个对象进行比较？答案

【问题标题】：How to compare a LatLng object with another one which is in an array?如何将 LatLng 对象与数组中的另一个对象进行比较？
【发布时间】：2015-05-23 16:07:18
【问题描述】：

我是 JavaScript 的初学者。最近我正在尝试在 Google Map 中开发关联应用程序。但是我遇到了一个奇怪的问题。

请参考下面的代码。

<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
</head>

<body>
<script>

var buf = []; 
var pos1  = new google.maps.LatLng(1, 2); buf.push(pos1); 
var pos2  = new google.maps.LatLng(3, 4); buf.push(pos2); 
var pos3  = new google.maps.LatLng(5, 6); buf.push(pos3); 

//initialize a new object here
var pos4  = new google.maps.LatLng(3, 4);

if ( buf.indexOf(pos4) != -1 ) 
    document.write("yes");
else
    document.write("no");

</script>
<body>
</html>

由于pos4 的值与pos2 相同，如果数组中位置确实存在，则打印结果应为“是”。 但是它在屏幕上打印了“否”。

我尝试打印出pos4 和pos2 的值。我发现两者都是一样的，我不知道为什么这个检查失败了。 有什么办法可以解决问题吗？

【问题讨论】：

两个不同的对象即使拥有相同的数据也将无法通过相等性测试。例如var a = {test: 1}, b = {test: 1}; alert(a == b); 将导致false。您需要测试对象中primitive data 的相等性。在您的示例中，这意味着测试纬度和经度是否相等。

标签： javascript html arrays google-maps-api-3

【解决方案1】：

根据Google Maps API V3 docs，所有LatLng 对象都有一个equals 方法，可用于比较两个不同的LatLng 对象：

var p1 = new google.maps.LatLng(3, 10),
    p2 = new google.maps.LatLng(3, 10);

console.log(p1.equals(p2)); // logs "true"

【讨论】：

【解决方案2】：

默认indexOf 在对象比较中不起作用，因为 2 个对象从不相等（只有当它们具有相同的引用时它们才相等），as pointed out here .

您可以基于this post 创建您的indexOf 函数。并比较来自对象的lat() 和lng()、function results。

buf.indexOf = function indexOf(elem){
  index = -1;
  for(var i = 0, len = buf.length; i < len; i++) {
    if (this[i].lat() === elem.lat() 
        && this[i].lng() === elem.lng() ) {
      index = i;
      break;
    }
  }
  return index;
}

注意：正如@greg-burghardt 所建议的，您可以将this[i].lat() === elem.lat() && this[i].lng() === elem.lng() 替换为this[i].equals(elem)。

用法：

var buf = []; 
buf.indexOf = function indexOf(elem){
  index = -1;
  for(var i = 0, len = buf.length; i < len; i++) {
    if (this[i].lat() === elem.lat() 
        && this[i].lng() === elem.lng() ) {
      index = i;
      break;
    }
  }
  return index;
}

var pos1  = new google.maps.LatLng(1, 2); buf.push(pos1); 
var pos2  = new google.maps.LatLng(3, 4); buf.push(pos2); 
var pos3  = new google.maps.LatLng(5, 6); buf.push(pos3); 

//initialize a new object here
var pos4  = new google.maps.LatLng(3, 4);
var status = "";
if ( buf.indexOf(pos4) != -1 ) 
  status += 'yes - ' + pos4 + '- index ' +  buf.indexOf(pos4);
else
  status += "no";

var pos5  = new google.maps.LatLng(1, 4);
status += '<br />';
if ( buf.indexOf(pos5) != -1 ) 
  status += 'yes - ' + pos5 + '- index ' +  buf.indexOf(pos4);
else
  status += 'no - ' + pos5;  
  
document.getElementById('status').innerHTML = status;

<head>
  <script src = "http://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
  <div id="status"></div>
<body>

【讨论】：

@user3844189 很高兴能帮到你。如果我的解决方案对您有帮助，您能否将其标记为已接受？