在自动完成地图上搜索无法正常工作

时间：2018-11-08 01:45:58

标签： javascript html google-maps google-maps-api-3

我正在实现Google Maps API的自动完成功能，以便它在该地址的坐标多边形内查找并验证该地址是否在其中。

问题在于它可以正常工作，直到我输入“ San Juan 2638”的地址（例如），并且如果我通过单击建议将其选中，结果就是一张地图在美国搜索，而应该在阿根廷的罗萨里奥。

希望您能为我提供帮助，因为我找不到错误

我把我正在做的完整代码留给你

JS： 

    /*=============================================
    GOOGLE AUTOCOMPLETE + MAP
    =============================================*/

    function initAutocomplete() {

        var pac_input = document.getElementById('registroDireccion');

        var autocomplete_options = {
                         types: ['address'],
                         componentRestrictions: {country: "ar"}
        };

        /*=============================================
        SELECTION OF FIRST SUGGESTION WHEN GIVING "ENTER"
        =============================================*/

        (function pacSelectFirst(input) {
            // store the original event binding function
            var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;

            function addEventListenerWrapper(type, listener) {
                // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
                // and then trigger the original listener.
                if (type == "keydown") {
                    var orig_listener = listener;
                    listener = function(event) {
                        var suggestion_selected = $(".pac-item-selected").length > 0;
                        if (event.which == 13 && !suggestion_selected) {
                            var simulated_downarrow = $.Event("keydown", {
                                keyCode: 40,
                                which: 40
                            });
                            orig_listener.apply(input, [simulated_downarrow]);
                        }

                        orig_listener.apply(input, [event]);
                    };
                }

                _addEventListener.apply(input, [type, listener]);
            }

            input.addEventListener = addEventListenerWrapper;
            input.attachEvent = addEventListenerWrapper;

            var autocomplete = new google.maps.places.Autocomplete(input, autocomplete_options);

        })(pac_input);

        //var autocomplete = new google.maps.places.Autocomplete(input, options);

            /*=============================================
            VALIDATE ADDRESS WITHIN THE COORDINATE POLYGON
            =============================================*/

            // We create the instace bounds
            var bounds = new google.maps.LatLngBounds();

            // We extract the coordinates
            var coords = [

                    {"lat": -32.9524231, "lng": -60.6682936},{"lat": -32.9719713, "lng": -60.67327},{"lat": -32.9741199, "lng": -60.6609489},{"lat": -32.9672002, "lng": -60.6591224},{"lat": -32.9717621, "lng": -60.6342073},{"lat": -32.9694741, "lng": -60.6335479},{"lat": -32.9715067, "lng": -60.6218164},{"lat": -32.9680472, "lng": -60.6205835},{"lat": -32.9630917, "lng": -60.6216094},{"lat": -32.958511, "lng": -60.6209314},{"lat": -32.9521298, "lng": -60.624212},{"lat": -32.9520442, "lng": -60.6251776},{"lat": -32.9503966, "lng": -60.6262076},{"lat": -32.9501265, "lng": -60.6256068},{"lat": -32.9462216, "lng": -60.6283345},{"lat": -32.9380717, "lng": -60.636903},{"lat": -32.9317529, "lng": -60.6468345},{"lat": -32.9265583, "lng": -60.6577651},{"lat": -32.9176559, "lng": -60.6700872},{"lat": -32.9182323, "lng": -60.6901178},{"lat": -32.9197859, "lng": -60.6891415},{"lat": -32.9284696, "lng": -60.6885702},{"lat": -32.9282011, "lng": -60.6780258},{"lat": -32.9294789, "lng": -60.6778898},{"lat": -32.9294001, "lng": -60.6743024},{"lat": -32.9333037, "lng": -60.6713756},{"lat": -32.9334751, "lng": -60.6734615},{"lat": -32.9351777, "lng": -60.6738827},{"lat": -32.9344493, "lng": -60.677983},{"lat": -32.9377555, "lng": -60.6788352},{"lat": -32.9360567, "lng": -60.6882969},{"lat": -32.9374164, "lng": -60.6886667},{"lat": -32.9364591, "lng": -60.6936267},{"lat": -32.9405789, "lng": -60.6936545},{"lat": -32.9481519, "lng": -60.6934212}

                ] 

            // We add the coordinate to the bounds
            .map(function(coord) {

                bounds.extend(coord);
                return coord;

            });

            // We create the polygon
            var area = new google.maps.Polygon({

                paths: coords,
                strokeColor: '#F99830',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#F99830',
                fillOpacity: 0.30,
                draggable: false

            });

            // We created the map
            var map = new google.maps.Map(document.getElementById('map'), {

                zoom: 12.6,
                center: bounds.getCenter(), // Centramos el mapa al area
                mapTypeId: 'terrain',
                disableDefaultUI: true

            });

            // We add the area to the map
            area.setMap(map);

            var geocoder = new google.maps.Geocoder();

            jQuery(document).ready(function() {

                $('#registroDireccion').on('change', function() {
                    var place = $(this).val().trim();
                    if (!place) {
                        return;
                    }
                    geocoder.geocode({
                            address: place
                        },
                        function(results, status) {

                            if (status === google.maps.GeocoderStatus.OK) {
                                var result = results[0];
                                var marker = new google.maps.Marker({
                                    position: result.geometry.location,
                                    map: map,
                                    label: place
                                });

                                if (google.maps.geometry.poly.containsLocation(result.geometry.location, area)) {

                            $("#registroDireccion").parent().before('<div class="alert alert-success"><strong>GREAT!</strong> Our delivery system arrives at your address.</div>');

                            } else {

                                $("#registroDireccion").parent().before('<div class="alert alert-success"><strong>WHAT EVIL!</Strong> Our delivery system does NOT arrive at your address.</div>');

                                    document.getElementById("registroDireccion").value = "";

                                }

                            }

                        });

                })

            });

    }

HTML 

<div class="form-group">

                    <div class="input-group">


                        <input type="text" class="form-control" id="registroDireccion" name="registroDireccion" placeholder="Dirección de envío" required>

                    </div>

</div>

<div>

        <button type="button" id="mostrarMapa" class="btn btn-default btn-xs pull-left">Mostrar zona de envío</button>

</div>

                <div class="col-sm-12" id="map"></div>

SCRIPT API GOOGLE： 

<script src="https://maps.googleapis.com/maps/api/js?library=geometry&key=AIzaSyBDJVJOqxxr1PfcuzMZWYOut0lkGDW1YsU&libraries=places&callback=initAutocomplete" async defer></script>

1 个答案:

答案 0 :(得分：0)

您发布的代码不是最少的...而且，如果您希望仅从该区域看到建议，那么我看不到您应将边界设置为“自动完成”。

下面是如何正确实施示例的示例。

  1. 根据坐标创建边界对象
  2. 将边界对象应用于自动完成功能，并使用strictBounds: true
    3. 将搜索限制在此区域
  3. 按照您在问题中提出的建议尝试（输入San Juan 2638并单击建议）
  4. 它会创建一个标记，然后将地图平移到位于阿罗萨里奥（Rosario）的位置

function initialize() {

  var myLatLng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  // We create the instace bounds
  var bounds = new google.maps.LatLngBounds();

  // We extract the coordinates
  var coords = [

      {
        "lat": -32.9524231,
        "lng": -60.6682936
      }, {
        "lat": -32.9719713,
        "lng": -60.67327
      }, {
        "lat": -32.9741199,
        "lng": -60.6609489
      }, {
        "lat": -32.9672002,
        "lng": -60.6591224
      }, {
        "lat": -32.9717621,
        "lng": -60.6342073
      }, {
        "lat": -32.9694741,
        "lng": -60.6335479
      }, {
        "lat": -32.9715067,
        "lng": -60.6218164
      }, {
        "lat": -32.9680472,
        "lng": -60.6205835
      }, {
        "lat": -32.9630917,
        "lng": -60.6216094
      }, {
        "lat": -32.958511,
        "lng": -60.6209314
      }, {
        "lat": -32.9521298,
        "lng": -60.624212
      }, {
        "lat": -32.9520442,
        "lng": -60.6251776
      }, {
        "lat": -32.9503966,
        "lng": -60.6262076
      }, {
        "lat": -32.9501265,
        "lng": -60.6256068
      }, {
        "lat": -32.9462216,
        "lng": -60.6283345
      }, {
        "lat": -32.9380717,
        "lng": -60.636903
      }, {
        "lat": -32.9317529,
        "lng": -60.6468345
      }, {
        "lat": -32.9265583,
        "lng": -60.6577651
      }, {
        "lat": -32.9176559,
        "lng": -60.6700872
      }, {
        "lat": -32.9182323,
        "lng": -60.6901178
      }, {
        "lat": -32.9197859,
        "lng": -60.6891415
      }, {
        "lat": -32.9284696,
        "lng": -60.6885702
      }, {
        "lat": -32.9282011,
        "lng": -60.6780258
      }, {
        "lat": -32.9294789,
        "lng": -60.6778898
      }, {
        "lat": -32.9294001,
        "lng": -60.6743024
      }, {
        "lat": -32.9333037,
        "lng": -60.6713756
      }, {
        "lat": -32.9334751,
        "lng": -60.6734615
      }, {
        "lat": -32.9351777,
        "lng": -60.6738827
      }, {
        "lat": -32.9344493,
        "lng": -60.677983
      }, {
        "lat": -32.9377555,
        "lng": -60.6788352
      }, {
        "lat": -32.9360567,
        "lng": -60.6882969
      }, {
        "lat": -32.9374164,
        "lng": -60.6886667
      }, {
        "lat": -32.9364591,
        "lng": -60.6936267
      }, {
        "lat": -32.9405789,
        "lng": -60.6936545
      }, {
        "lat": -32.9481519,
        "lng": -60.6934212
      }
    ]

    // We add the coordinate to the bounds
    .map(function(coord) {

      bounds.extend(coord);
      return coord;
    });

  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
      types: ['geocode'],
      bounds: bounds,
      strictBounds: true
    });

  ac.addListener('place_changed', function() {

    var place = ac.getPlace();

    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    var marker = new google.maps.Marker({
      position: place.geometry.location,
      map: map
    });

    map.panTo(place.geometry.location);

    var html = '<div>Latitude: ' + place.geometry.location.lat() + '</div>';
    html += '<div>Longitude: ' + place.geometry.location.lng() + '</div>';

    document.getElementById('geometry').innerHTML = html;
  });
}

initialize();
#autocomplete {
  width: 300px;
}

#geometry {
  margin: 10px 0;
  background: yellowgreen;
  padding: 10px 20px;
}

#map-canvas {
  height: 300px;
}
<input id="autocomplete" placeholder="Enter your address" type="text"></input>
<div id="geometry">

</div>
<div id="map-canvas">

</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

  

您可能需要使用有效的API密钥来摆脱警告并获得预期的结果。

相关问题
最新问题