使用jQuery地址选择器获取区域名称

时间:2016-01-06 17:59:11

标签: jquery

我试图在以下脚本中获取region域的内容,以便在输入地址时自动显示该区域。 我会在js脚本中创建一个名为getRegion()的新函数吗?

我该怎么做?



<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"/>

    <title>placepicker</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"></link>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet"></link>

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places">
    </script>

    <script src="http://www.jqueryscript.net/demo/jQuery-Location-Autocomplete-with-Google-Maps-Places-Library-Placepicker/src/js/jquery.placepicker.js"></script>

    <script>

      $(document).ready(function() {

        // Basic usage
        $(".placepicker").placepicker();

        // Advanced usage
        $("#advanced-placepicker").each(function() {
          var target = this;
          var $collapse = $(this).parents('.form-group').next('.collapse');
          var $map = $collapse.find('.another-map-class');

          var placepicker = $(this).placepicker({
            map: $map.get(0),
            placeChanged: function(place) {
              console.log("place changed: ", place.formatted_address, this.getLocation());
            }
          }).data('placepicker');
        });

      }); // END document.ready

    </script>

    <style>

      .placepicker-map {
        width: 100%;
        height: 300px;
      }

      .another-map-class {
        width: 100%;
        height: 300px;
      }

      .pac-container {
        border-radius: 5px;
      }

    </style>

  </head>

  <body>


    <div class="container">

      <h1>Basic usage</h1>
      <div class="row" data-example>
        <div class="col-md-6">
          <div class="form-group">
            <input class="placepicker form-control" placeholder="Enter a location"/>
          </div>
        </div>
      </div>
    </div>


  </body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

行。

我有一个很好的建议,首先: 在函数initAutoComplete()中 我可以显示place.address_components [2] .long_name

这是一个地区的名称。