如何在 Google Maps API 搜索结果中显示自定义地点？

Question

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

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

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

提前致谢！

Answer 1

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

解释：

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

var marker = new google.maps.Marker({ <em>marker_properties</em> });

好的，那么我们如何为您拥有的地点添加所有标记？好吧，您只需遍历具有坐标的地方。首先，让我们创建 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

我希望这对像我一样不熟悉 google maps api 的人有用。