Ich habe festgestellt, dass Google Maps Autocomplete nicht wirklich wie erwartet funktioniert. Ich musste ein paar Workarounds machen, damit es tatsächlich "erscheinen" kann. Jetzt werden die Autocomplete-Daten nicht angezeigt, nachdem ich die Stadt/das Land/die Region usw. eingegeben habe.MVC 4: Google Maps Autocomplete-Daten werden nach der Eingabe nicht angezeigt [Bootstrap]
Hier ist mein Code. Es ist wirklich frustrierend. (Ich las über den PAC-Container z-Index bis 10000 Styling, aber das hat nicht funktioniert entweder.)
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13
});
var input = /** @@type {!HTMLInputElement} */ (
document.getElementById('pac-input'));
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** @@type {google.maps.Icon} */ ({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
initMap();#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
z-index: 0;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<[email protected]{
ViewBag.Title = "Home Page";
}-->
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a>
</p>
</div>
<div id="map" style="position: absolute; margin-top:10%; margin-left: 45%; width: 50%; height: 50%; top: 0; bottom: 0; left: 0; right: 0;"></div>
<input type="text" id="pac-input" class="controls" placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address">
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
</div>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places"></script>Ich fand heraus, dass das Problem in erster Linie Bootstrap ist. Ich bin mir nicht sicher, wie ich dieses Problem beheben kann. Ich habe Beispiele von Leuten gesehen, die versuchen, das Autocomplete-Ding auf ein Bootstrap-Modal zu setzen, aber das ist nicht mein Ziel.
Gibt es trotzdem eine Lösung?
P.S. Fügen Sie Ihren API-Schlüssel ein, um die Ergebnisse anzuzeigen.
UPDATE Jetzt glaube ich es JQuery ist, weil ich Bootstrap aus einem Vanille-Projekt gelöscht und es funktioniert immer noch nicht. Ich habe alle jQuery Referenzen entfernt und es hat funktioniert, aber ich verstehe es nicht. Sie müssen jquery entfernen, damit Google Maps Autocomplete funktioniert ???
Was genau nicht funktioniert? Die Places-Suchergebnisse werden in Ihrem Beispiel wie erwartet angezeigt. – vanburen
Es funktioniert in JSFiddle aus irgendeinem seltsamen Grund. Es funktioniert nicht, wenn Sie ein Vanilla-MVC-Projekt @vanburen erstellen –