1

我想用 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>
4

2 回答 2

5

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

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 文档中找到更多信息。

于 2012-10-05T12:06:20.193 回答
0

这是一个旧帖子。但是在我的代码中，它可以在没有默认边界选项的情况下工作。查看谷歌地图平台

所以像这样；

// 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());
    });
于 2020-05-03T09:27:17.800 回答