如何在 Google Maps API 搜索结果中显示自定义地点? [英] How to display custom places in Google Maps API search results?

问题描述

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

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.

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

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?

提前致谢！

推荐答案

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

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

说明:

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

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 标记 = new google.maps.Marker({ marker_properties });

var marker = new google.maps.Marker({ marker_properties });

好的，那么我们如何为您拥有的地点添加所有标记?好吧，您只需遍历具有坐标的位置即可.首先，让我们创建 Places 数组:

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],
    });
};

好的，所以这段代码只使用了基本的 API 功能，应该没有问题.但是我们创建的所有标记一直存在于地图上，无论它们是否在可见范围内.但是我们希望标记只有在我们正在查看的地图部分内时才会出现.现在这正是我的问题.这是我们如何做到的.

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.

关键词是bounds.事实证明，使用地图 API，我们可以制作以下事件侦听器:

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);

    }
};

});

就是这样！现在，只有在地图的可见部分内才会创建标记！您可能已经注意到，我还创建了一个空的 place_markers 对象，然后将所有创建的标记推入其中.为什么?因为我们还需要做一件事.如果它们超出当前范围，我们希望删除所有创建的标记！因此，每次更改边界时，我们都希望此代码执行:

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);
  }
}

您可以看到这里我使用了一个内置的 bounds.contains() 函数来检查创建的标记是否在边界内.创建标记时也可以使用相同的函数，但我决定保留这样的代码以显示找到正确解决方案的过程.最重要的是，标记现​​在在超出边界时会被移除，而在它们在边界内时会被创建！

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!

还有一件事我不得不说.这不是完成我想要的任务的唯一方法.它可以通过许多其他方式完成.我找到了使用 PHP 和 MySQL 的高级方法的分步说明:https://developers.google.com/maps/articles/phpsqlsearch_v3

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

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

I hope this will be useful for someone who is, like me, new to google maps api.

这篇关于如何在 Google Maps API 搜索结果中显示自定义地点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！