如何在 Google Maps JavaScript API v3 中集成 SearchBox？答案

【问题标题】：How to integrate SearchBox in Google Maps JavaScript API v3?如何在 Google Maps JavaScript API v3 中集成 SearchBox？
【发布时间】：2012-09-26 13:31:40
【问题描述】：

我想使用 JavaScript API v3 创建一个顶部带有搜索框的谷歌地图：https://google-developers.appspot.com/...。

目前我使用以下代码通过获取 url (php get) 中的纬度和经度来显示地图：

<?php

$latitude = $_GET['lat'];
$longitude = $_GET['long'];


?>
<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript">  
  </script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }

      #search-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #target {
        width: 345px;
      }


    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {

          var input = document.getElementById('searchTextField');
          var image = 'pin.png';
          var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
        var mapOptions = {
          center: myLatlng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: true,
        };




        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);


            var marker = new google.maps.Marker({
      icon: image,
      position: myLatlng,
      map: map,
      animation: google.maps.Animation.DROP,
      title:"You Location"

  });


      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

但我不明白，要像在指定站点上那样集成搜索框！！！

有人可以帮忙吗？

我将代码编辑到这个，但我不工作！：

<?php

$latitude = $_GET['lat'];
$longitude = $_GET['long'];


?>
<!DOCTYPE html>
<html>
  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }

      #search-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #target {
        width: 345px;
      }


    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {

          var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds // have to be defined first
});

google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();
      // do your stuff here


          var input = document.getElementById('searchTextField');
          var image = 'pin.png';
          var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
        var mapOptions = {
          center: myLatlng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: true,
        };




        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);


            var marker = new google.maps.Marker({
      icon: image,
      position: myLatlng,
      map: map,
      animation: google.maps.Animation.DROP,
      title:"You Location"

      var input = document.getElementById('target');
        var searchBox = new google.maps.places.SearchBox(input);
        var markers = [];

        google.maps.event.addListener(searchBox, 'places_changed', function() {
          var places = searchBox.getPlaces();


  });

    }); 

      }
    </script>
  </head>
  <body onload="initialize()">
  <div id="search-panel">
      <input id="target" type="text" placeholder="Search Box">
    </div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

【问题讨论】：

标签： google-maps search-box

【解决方案1】：

您还必须加载地方搜索框：

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds // have to be defined first
});

然后就可以监听places_changed事件了：

google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();
      // do your stuff here
});

查看您发布的示例页面的源代码，了解在其中可以做什么，例如绘图标记等。

您可以在SearchBox API Documentation找到更多信息。

【讨论】：

请看@我的更新，它不起作用！ :/// 显示搜索字段但没有显示地图...
@LaurenzGlück 您的代码中有很多 sintax 错误。例如，您没有关闭 addListener 调用 (put "});"在“//在这里做你的事情”之后。

【解决方案2】：

这是一个旧帖子。但是在我的代码中，它可以在没有默认边界选项的情况下工作。见Google Maps Platform

就这样;

// Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');

    var searchBox = new google.maps.places.SearchBox(input); // <- like this

    map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

【讨论】：