如何在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？edit = 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不熟悉的人有用.