如何為Google Places API動態更改地理位置

Question

我正在使用google place api，其中第一個用戶選擇城市並在文本字段中輸入地址以獲取特定於該城市的位置。 為此，我使用了圓弧邊界。

現在，當用戶更改城市時，我需要重新初始化Google Place API以應用新的圈子范圍。 我已經使用以下腳本。

<select name="cities" id="cities" onchange="initialize()">
        <option value="0">Select City</option>
        <option value="1" lat="40.7128" long="74.0059">Newyork</option>
        <option value="2" lat="34.0522" long="118.2437">Los Angeles</option>
        <option value="3" lat="42.3601" long="71.0589">Boston</option>
    </select>
    <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>
<script type="text/javascript">

    function initialize() 
    {
        var input = document.getElementById('searchTextField');
        var lat  = jQuery('#cities option:selected').attr('lat');
        var long = jQuery('#cities option:selected').attr('long');

        //alert(lat+' == '+long);

        var geolocation = {
            lat: lat,
            lng: long
        };
        var circle = new google.maps.Circle({
            center: geolocation,
            radius: 50
        });

        var options = {
            componentRestrictions: {country: "us"}
        };

        var temp = new google.maps.places.Autocomplete(input, options);
        temp.setBounds(circle.getBounds());
    }


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

</script>

Answer 1

您應該已經提到了您所面臨的確切問題，這將有助於我朝正確的方向思考，但是無論如何您的代碼看起來都很正常，所以讓它走了，找到了這些問題

1。當像這樣構造LatLngLiteral

   var geolocation = {
       lat: lat,
       lng: long
   };

將其傳遞給google函數時，值應為數字而不是字符串。可能是您收到此錯誤“屬性lat：不是數字中的不是LatLng或LatLngLiteral：”，因為typeof lat會給出"string"

為了符合要求，您需要使用parseFloat對其進行轉換。現在， typeof parseFloat(lat)將給出"number"

   var geolocation = {
       lat: parseFloat(lat),
       lng: parseFloat(long)
   };

2。由於美國位於格林尼治標准時間（GMT）的西部，因此所有州的經度均為負，但是您使用的是正經度，因此應該是這樣

    <option value="1" lat="40.7128" long="-74.0059">Newyork</option>
    <option value="2" lat="34.0522" long="-118.2437">Los Angeles</option>
    <option value="3" lat="42.3601" long="-71.0589">Boston</option>