Question

我想创建一个带有搜索框的谷歌地图，就像这一边：https://google-developers.appspot.com/...和JavaScript API v3。

目前我使用以下代码通过获取网址中的纬度和经度来显示地图（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>

Answer 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。

中找到更多信息

Answer 2

这是旧帖子。但是在我的代码中，它没有默认的bounds选项就可以工作。参见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());
    });

如何在Google Maps JavaScript API v3中集成Search Box？

2 个答案: