如何在Google Maps API搜索结果中显示自定义地点？
这里有一个带有搜索框的谷歌地图的基本示例：https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
我想完成一件非常简单的事情。我只想硬编码一些位置(可能是一些简单的数组/对象及其纬度和经度)，然后当你搜索地点时，例如“华盛顿”，如果它们中的一些确实在华盛顿内部，那么这些位置就会被显示(带有标记)。如果我搜索“非洲”，并且我的一些位置在非洲境内，我希望显示它们。如果我搜索的地方没有我的位置，那么它们就不应该被显示出来。
我还发现了这个- https://developers.google.com/places/documentation/actions#adding_a_place。但我不确定这是不是我应该使用的目的(或者我应该？)。如果是，我不确定如何使用它-我应该将建议的JSON数据发送到哪里？
提前感谢！
回答 1
Stack Overflow用户
发布于 2014-05-25 20:13:40
好了，我已经解决了！我想分享一下它是如何做到的……我必须说，编程世界对我来说是新的，见鬼，它非常有趣:)，这是我第一次使用任何类型的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。
我希望这会对像我一样刚接触谷歌地图api的人有所帮助。
https://stackoverflow.com/questions/23824133
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号