[英]Google Maps API V3 - Javascript Issue
I have create a site embedded Google mapusing api V3 that shows our 4 offices, you can then type your postcode and check the distance between you and an office, this works!我已经使用 api V3 创建了一个嵌入 Google 地图的站点,它显示了我们的 4 个办公室,然后您可以输入您的邮政编码并检查您与办公室之间的距离,这很有效!
I want to now create a radial search, I've found how to do it online, which is great and am on the final hurdle and this is where I need your help if possible.我现在想创建一个径向搜索,我已经找到了如何在网上进行搜索,这很好,并且正处于最后的障碍中,如果可能的话,我需要你的帮助。
I have the following:我有以下内容:
geocoder = new google.maps.Geocoder(); // creating a new geocode object
// getting the two address values
address1 = document.getElementById("addresses1").value;
distance1 = document.getElementById("distance").value;
// finding out the coordinates
if (geocoder)
{
geocoder.geocode( { 'address': address1}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of first address (latitude + longitude)
location1 = results[0].geometry.location;
// Location Marker
var marker = new google.maps.Marker({
map: map,
position: location1,
title: 'Random text'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: distance1,
strokeWeight: 0,
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
I have managed to get everything working except for $distance1
.除了
$distance1
之外,我已经设法让一切正常。 What should happen is, the user selects the distance from a form: say 10 miles (set in meters for Google Maps) when they hit submit, a circle is drawn with a radius of 10 miles.应该发生的是,用户从表单中选择距离:比如说 10 英里(谷歌地图以米为单位),当他们点击提交时,会绘制一个半径为 10 英里的圆圈。
As the code stands, the point is drawn but, the circle does not appear.正如代码所示,该点已绘制,但未出现圆。
If I replace distance1 = document.getElementById("distance").value;
如果我替换
distance1 = document.getElementById("distance").value;
with distance1 = 16999;
distance1 = 16999;
for example, then a circle appears and it works perfectly.例如,然后出现一个圆圈并且它完美地工作。
To me this must mean that there is something wrong with the content of distance1
when it is being pulled from the form.对我来说,这一定意味着从表单中拉出
distance1
的内容有问题。 I have done a NaN test just to be sure and it reports that the content is a number.为了确定,我做了一个 NaN 测试,它报告内容是一个数字。
My question is (in a very long winded way - sorry about that) do you have any idea how to get distance1
to have a value from the form.我的问题是(以一种非常冗长的方式 - 对此感到抱歉)你知道如何让
distance1
从表格中获得价值。
// Add circle overlay and bind to marker var circle = new google.maps.Circle({ map: map, radius: distance1, strokeWeight: 0, fillColor: '#AA0000' });
The part in question is radius: distance1
有问题的部分是
radius: distance1
1
Might help to make sure it is a number, not a string.可能有助于确保它是一个数字,而不是一个字符串。
distance1 = parseFloat(document.getElementById("distance").value);
(parseInt would probably work fine as well, since it is in meters and fractional meters won't make much difference) (parseInt 可能也可以正常工作,因为它以米为单位,而分数米不会有太大区别)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.