如何动态更改 google 个地点 api 的地理位置
How to change geolocation dynamically for google places api
我正在 google 个地方 api 工作,其中第一个用户选择城市并在文本字段中输入地址以获取特定于该城市的位置。为此,我使用了圆圈边界。
现在,当用户更改城市时,我需要重新初始化 google 地点 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&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.构造时LatLngLiteral
这样
var geolocation = {
lat: lat,
lng: long
};
当将此传递给 google 函数时,值应该是数字而不是 string.May 因为您收到此错误 "not a LatLng or LatLngLiteral: in property lat: not a number"因为 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>
我正在 google 个地方 api 工作,其中第一个用户选择城市并在文本字段中输入地址以获取特定于该城市的位置。为此,我使用了圆圈边界。
现在,当用户更改城市时,我需要重新初始化 google 地点 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&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.构造时LatLngLiteral
这样
var geolocation = {
lat: lat,
lng: long
};
当将此传递给 google 函数时,值应该是数字而不是 string.May 因为您收到此错误 "not a LatLng or LatLngLiteral: in property lat: not a number"因为 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>