MVC 4：谷歌地圖自動完成數據輸入後不顯示[引導]

Question

我已經注意到，使用谷歌地圖自動完成並不像預期的那樣工作。我不得不做一些解決方法，以便它可以真正「出現」。現在我開始輸入城市/國家/地區後，自動完成數據不顯示。

這是我的代碼。這真的令人沮喪。 （我讀造型該.pac容器的z-index至10000，但沒有任何工作。）

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" /> 
 
<!--@{ 
 
    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 &raquo;</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>

我發現這個問題，主要是引導。我不知道如何解決這個問題。我見過有人試圖將自動完成的東西放在引導模式上，但那不是我的目標。

有沒有辦法解決這個問題？

P.S.插入您的API密鑰以查看結果。

UPDATE 現在我相信這是Jquery，因爲我刪除了Bootstrap出了一個香草項目，它仍然無法工作。我刪除了所有的jquery引用，它工作，但我不明白。你必須刪除jquery才能使Google地圖自動完成工作？

Answer 1

我幾乎有完全相同的問題（但我沒有使用jQuery，我使用的是API的關鍵），並最終找到了一些可行的方法。因此，我不能保證這會解決你的問題，但如果你像我一樣掙扎，那就值得一試。

1. 轉到Google控制檯。
2. 創建api密鑰。
3. 啓用「Google Maps Javascript Api」並將「key」參數添加到您的api網址中。
4. 啓用「Google Places API Web服務」。
5. Voila（希望）。

答信貸Hsuan-ming Yang