如何在Google Maps API搜索结果中显示自定义地点？ [英] How to display custom places in Google Maps API search results?
问题描述
所以有一个带有搜索框的Google地图的基本示例： https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
我想完成一些非常简单的事情。
我想只对一些位置进行硬编码（可能是一些简单的数组/对象，它们的纬度和经度），然后当您搜索位置时，例如华盛顿，则会显示这些位置（带标记）如果他们中的一些确实在华盛顿内部的话。如果我搜索非洲，我的一些地点位于非洲境内，我希望他们能够展示。如果我搜索的地方没有我的位置，那么他们应该不显示。
我也发现这个 - https://developers.google.com/places/documentation/actions#adding_a_place 。
但我不确定这是我应该用于我的目的（还是应该？）。如果是这样，我不知道如何使用它 - 我在哪里发送建议的JSON数据？
预先感谢！
好吧，我解决了它！我想分享它是如何完成的......我必须说，编程世界对我来说是新的，地狱它非常有趣:)而且这是我第一次使用任何类型的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'，
['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功能，应该没问题。但是我们创建的所有标记都始终存在于地图上，无论它们是否在可见边界内。但是我们希望标记只有在我们正在查看的地图部分内才会出现。这正是我的问题所在。这是我们如何做到的。
关键词是界限。事实证明，通过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）; //不需要我们的目的，它增加了对新搜索的偏见
var NE = bounds.getNorthEast（）;
var SW = bounds.getSouthWest（）;
//遍历所有地方
for（var i = 0; i< random_places.length; i ++）{
var place_arr = random_places [i];
$ （（NE.lat（）> place_arr [1]&& place_arr [1]> SW.lat（b））; //检查一个地方是否在边界内 - 不是最好的方式，稍后解释
（））&&
（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 对象，然后将已标记的所有已标记的对象推送到它。为什么？因为我们需要做更多的事情。我们希望删除所有创建的标记，如果它们落在当前边界之外！
因此，每次更改边界时，我们都希望执行此代码：
//移除出界标记
（var k = 0; k
if（！bounds.contains（one_marker.getPosition（）））{
one_marker.setMap（null）;
$ / code $ / pre
你可以看到在这里我使用了一个built在 bounds.contains（）函数中检查创建的标记是否在边界内。创建标记时也可以使用相同的函数，但是我决定留下这样的代码以显示找到正确解决方案的过程。
最重要的是标记现在被删除，当它们超出边界并在它们内部被创建时！
还有一件事我必须说。这不是完成我想要的任务的唯一方法。它可以通过许多其他方式完成。我已经找到了一个使用PHP和MySQL的高级方法的分步说明：
https://developers.google.com/maps/articles/phpsqlsearch_v3
我希望这对像我这样的新人很有用谷歌地图API。
So there is this basic example of a google map with a searchbox: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I want to accomplish something very simple.
I'd like to just hardcode some locations (may be some simple array/object with their latitudes and longitudes) and then when you search for place, for example, "Washington", then those locations are displayed (with marker) if some of them are indeed inside Washington. If I search for "Africa" and some of my locations are inside africa, I want them to be displayed. And if I search for a place which has none of my locations, then they should simply be not displayed.
I also found this — https://developers.google.com/places/documentation/actions#adding_a_place.
But I am not sure if that is what I should use for my purpose (or should I?). And if it is, I'm not sure how to use it — where do I send the suggested JSON data?
Thanks in advance!
解决方案 Alright, i've solved it! I'd like to share how it is done... I must say, programming world is new to me and hell it is very interesting :) And it is the first time I've used any kind of API... Here is a working example: http://codepen.io/everdimension/pen/LpfEH?editors=001
Explained:
So, first thing you gotta know is how to add markers. That can be easily found in maps API documentation. The marker is added like that:
var marker = new google.maps.Marker({ marker_properties });
Ok, so how do we add all the markers for the places you have? Well, you simply iterate through the places which have coordinates. First, let's create the places array:
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]
];
Ok, now let's iterate through these places and add a marker each time:
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],
});
};
Ok, so this code just uses basic API functionality and should be no problem. But all the markers we've created exist on the map all the time, no matter if they are within the visible bounds or not. But we want the markers to appear only if they are within the part of the map we are looking at. Now that's exactly what my question was about. And here's how we can do it.
The key word is bounds. Turns out, with maps API we can make the following event listener:
google.maps.event.addListener(map, 'bounds_changed', function() { ... });
And the function will execute each time the bounds of the maps are changed! What we have to do is check if the markers fall within the current bounds and if they do, we'll create them. So here:
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);
}
};
});
That's it! Now the markers only get created when they are within the visible part of the map!
You may have noticed that I had also created an empty place_markers object and then had pushed all created marked into it. Why? Because we need to do one more thing. We'd want to remove all the created markers if they fall outside of current bounds!
So each time the bounds are changed we would like for this code to execute:
// 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);
}
}
You can see that here I've used a built in bounds.contains() function to check if a created marker is within bounds. Same function can also be used when the markers are created, but I decided to leave the code like that to show the process of finding the correct solution.
The main thing is that the markers are now being removed when they fall out of bounds and get created when they are within!
One more thing I have to say. It's not the only way to accomplish the task I wanted. It can be done in many other ways. I have found a step-by-step explanation of an advanced way which uses PHP and MySQL:
https://developers.google.com/maps/articles/phpsqlsearch_v3
I hope this will be useful for someone who is, like me, new to google maps api.
这篇关于如何在Google Maps API搜索结果中显示自定义地点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
