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

说明：

所以，首先要知道的是如何添加标记。这可以在maps 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。事实证明，使用maps 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不熟悉的人有用。

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

1 个答案: