12

所以有一个带有搜索框的谷歌地图的基本示例：https ://developers.google.com/maps/documentation/javascript/examples/places-searchbox

我想完成一些非常简单的事情。我只想硬编码一些位置（可能是一些简单的数组/对象及其纬度和经度），然后当您搜索地点时，例如“华盛顿”，然后如果某些位置显示（带有标记）他们确实在华盛顿内部。如果我搜索“非洲”并且我的一些位置在非洲境内，我希望显示它们。如果我搜索一个没有我的位置的地方，那么它们应该根本不显示。

我还发现了这个——https://developers.google.com/places/documentation/actions#adding_a_place。但我不确定这是否是我应该用于我的目的（或者我应该？）。如果是，我不确定如何使用它——我应该将建议的 JSON 数据发送到哪里？

提前致谢！

4

1 回答 1

28

好的，我已经解决了！我想分享它是如何完成的......我必须说，编程世界对我来说是新的，地狱它非常有趣:) 这是我第一次使用任何类型的 API......这里是一个工作示例：http ://codepen.io/everdimension/pen/LpfEH?editors=001

解释：

所以，你首先要知道的是如何添加标记。这可以在地图 API 文档中轻松找到。标记是这样添加的：

var marker = new google.maps.Marker({ marker_properties });

好的，那么我们如何为您拥有的地方添加所有标记？好吧，您只需遍历具有坐标的地方。首先，让我们创建 places 数组： 

var random_places = [
  ['Moscow1', 55.822083, 37.665453, 4],
  ['Moscow2', 55.604697, 37.642107, 4],
  ['Lisbon1', 38.749402, -9.120034, 4],
  ['Lisbon2', 38.708960, -9.169130, 4],
  ['NewYork1', 40.784513, -73.976630, 4],
  ['NewYork2', 40.707522, -74.037055, 4],
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

好的，现在让我们遍历这些地方，每次添加一个标记：

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

好的，所以这段代码只使用了基本的 API 功能，应该没问题。但是我们创建的所有标记始终存在于地图上，无论它们是否在可见范围内。但我们希望标记仅在我们正在查看的地图部分内出现。这正是我的问题所在。这就是我们如何做到的。

关键词是bounds。事实证明，使用地图 API，我们可以创建以下事件侦听器：

google.maps.event.addListener(map, 'bounds_changed', function() { ... });

每次更改地图的边界时，该函数都会执行！我们要做的是检查标记是否在当前范围内，如果是，我们将创建它们。所以在这里：

var place_markers = [];

google.maps.event.addListener(map, 'bounds_changed', function() {

    var bounds = map.getBounds();
    searchBox.setBounds(bounds); // not needed for our purpose, it adds bias to new     searches

    var NE = bounds.getNorthEast();
    var SW = bounds.getSouthWest();

    // Iterate through all places
    for (var i = 0; i < random_places.length; i++) {
            var place_arr = random_places[i];

            // Check if a place is within bounds - not best way, explained later
            if ( (NE.lat() > place_arr[1] && place_arr[1] > SW.lat()) &&
                    (NE.lng() > place_arr[2] && place_arr[2] > SW.lng()) ) {

                    var myLatLng = new google.maps.LatLng(place_arr[1], place_arr[2]);
                    var marker = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            title: place_arr[0],
        });

        place_markers.push(marker);

    }
};

});

而已！现在标记只有在地图的可见部分内才会创建！您可能已经注意到，我还创建了一个空place_markers对象，然后将所有已创建标记推入其中。为什么？因为我们还需要做一件事。如果创建的标记超出当前范围，我们希望删除它们！因此，每次更改边界时，我们都希望执行以下代码：

// Remove out of bounds markers
for (var k = 0; k < place_markers.length; k++) {
  var one_marker = place_markers[k];
  if (!bounds.contains(one_marker.getPosition())) {
    one_marker.setMap(null);
  }
}

您可以看到，在这里我使用了一个内置bounds.contains()函数来检查创建的标记是否在范围内。创建标记时也可以使用相同的功能，但我决定保留这样的代码以显示找到正确解决方案的过程。主要的是，标记现​​在在超出范围时被移除，并在它们在范围内时被创建！

我还要说一件事。这不是完成我想要的任务的唯一方法。它可以通过许多其他方式完成。我找到了使用 PHP 和 MySQL 的高级方法的分步说明： https ://developers.google.com/maps/articles/phpsqlsearch_v3

我希望这对像我一样对谷歌地图 api 不熟悉的人有用。

于 2014-05-25T12:13:40.087 回答