向地点搜索添加自定义兴趣点

时间:2018-03-14 02:32:52

标签: google-maps google-places-api

使用谷歌地图和地方工具。

我想在我自己的,定制的,感兴趣的地方添加MERGED到建议下拉。

我不希望它们在地图上显示 - 只是在下拉的地方。

我不想将这些自定义POI添加到谷歌地图系统中,只是想将它们从我的本地数据库(在服务器上,使用通用处理程序)加载到地方下拉列表中。

我对这个问题进行了一些研究,但它们似乎都是以地图为重点的。这个功能是我不想要的。

1 个答案:

答案 0 :(得分:1)

您可以创建自己的搜索框来执行此操作。只需在地图中添加输入

即可
<input id="place_search" type="text" value="" placeholder="Search">

并使用 Jquery自动填充http://jqueryui.com/autocomplete/#remote-jsonp)。 记下Jquery自动完成描述:

  

自动填充功能使用户能够在键入时快速查找并选择预先填充的值列表,并利用搜索和   过滤

这意味着,您必须提供自己的搜索功能。

  $("#place_search").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "places.json", //replace this with your php file that returns the searched
        dataType: "json", 
        success: function(data) {
          response($.map(data, function(item) {
            return {
              id: item.id,
              value: item.value
            };
          }));
        }
      });
    },
    minLength: 2,
    select: function(event, ui) {
      mark_place(ui.item.value, ui.item.id); //action to do upon selection
    }
  });
});

选择后,只需添加地理编码器功能和标记,将地图中心设置为该区域即可转到地图中的搜索位置。

$(function() {
  function mark_place(label, place_id) {
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();
    // console.log(place_id);
    geocoder.geocode({
      'placeId': place_id
    }, function(results, status) {
      console.log(results);
      if (status === 'OK') {
        if (results[0]) {
          map.setZoom(11);
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
          infowindow.setContent(results[0].formatted_address);
          infowindow.open(map, marker);
        } else {
          window.alert('No results found');
        }
      } else {
        window.alert('Geocoder failed due to: ' + status);
      }
    });
  }

我假设你的页面中已有地图,所以我没有包含地图初始化功能。

以下是一个使用jquery自动填充功能进行搜索的工作示例应用:http://plnkr.co/edit/sg7NWTbRlDToAi3HGgLG?p=preview

请注意,执行此操作后,搜索建议仅限于您的数据库返回。