如何动态更改地理位置为google places api

时间:2016-12-27 05:33:48

标签: javascript google-places-api

我正在使用google places 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>

1 个答案:

答案 0 :(得分:1)

你应该已经提到了你所面临的确切问题,这会帮助我思考正确的方向,但无论如何你的代码看起来很正常所以给它一个去找到这些问题

1 。当构建LatLngLiteral时,这样

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

将此值传递给google函数时,值预计为数字而不是字符串。可能是您收到此错误“不是LatLng或LatLngLiteral:在属性lat中:不是数字”因为typeof lat"string"

为了符合您的要求,您需要使用parseFloat转换它们。现在typeof parseFloat(lat)会给"number"

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

2 。由于美国位于格林尼治标准时间以西,因此所有州都有负经度,但你使用的是肯定的应该是这样的

    <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>