Question

我想启用google map place autocomplete.its无效。否则加载地图点击事件没问题。只有自动填充功能无效。

我的javascript代码：

function initialize() {
    var chennai = {
        lat : 13.0827,
        lng : 80.2707
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom : 14,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        center : new google.maps.LatLng(13.069027557080204,
                80.19598960876465)
    });

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

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

    autocomplete.bindTo('bounds', map);

    google.maps.event.addListener(autocomplete, 'place_changed',
            function(event) {
                infowindow.close();
                alert();
                var place = autocomplete.getPlace();
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }
                 addMarker(place.geometry.location, map);
            });

    // This event listener calls addMarker() when the map is clicked.
    google.maps.event.addListener(map, 'click', function(event) {
        map.clearOverlays();
        addMarker(event.latLng, map);

        /* alert(event.latLng.lat());
        alert(event.latLng.lng()); */
    });

    google.maps.Map.prototype.clearOverlays = function() {
        for (var i = 0; i < markersArray.length; i++) {
            markersArray[i].setMap(null);
        }
    }

}


$(input).focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            infowindow.close();
            var firstResult = $(".pac-container .pac-item:first").text();
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({"address":firstResult }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat(),
                        lng = results[0].geometry.location.lng(),
                        placeName = results[0].address_components[0].long_name,
                        latlng = new google.maps.LatLng(lat, lng);
                    addMarker(latlng,map);
                    $(input).val(firstResult);
                }
            });
        }
    });
});

//for show map inside modal resize
$("#mapTrigger").click(function() {
    setTimeout(function() {
        google.maps.event.trigger(map, "resize");
    }, 400);
});

// Adds a marker to the map.
function addMarker(location, map) {
    // Add the marker at the clicked location, and add the next-available label
    // from the array of alphabetical characters.
     var marker = new google.maps.Marker({
        position : location,
        map : map
    });

    markersArray.push(marker);
    /* var contentString = '<div id="content" style="width:150px;height:150px">'
            + '<div id="siteNotice">'
            + '</div>'
            + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'
            + '<div id="bodyContent">'
            + 'sandstone rock formation in the southern part of the '
            + '(last visited June 22, 2009).</p>' + '</div>' + '</div>';

            var infowindow = new google.maps.InfoWindow({
                content : contentString
            });

    infowindow.open(map, marker); */
}

// Sets the map on all markers in the array.
function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

请帮忙。我正在使用最新的javascript googlemap api。

Answer 1

使用样式表修复了该问题。使用下面的样式表：

.pac-container {
background-color: #FFF;
z-index: 20;
position: fixed;
display: inline-block;
float: left;
 }
 .modal{
  z-index: 20;   
   }
    .modal-backdrop{
z-index: 10;        
 }

Java脚本谷歌地图，自动完成无法正常工作

1 个答案: