Question

我创建了一个嵌入谷歌地图的网站，使用api V3显示我们的4个办公室，然后您可以输入您的邮政编码并检查您和办公室之间的距离，这是有效的！

我现在想要创建一个径向搜索，我已经找到了如何在线进行搜索，这很棒，并且处于最后的障碍，这是我需要你帮助的地方。

我有以下内容：

        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);
            }
        });
    }

除了$distance1之外，我已经成功地完成了所有工作。应该发生的是，用户从表单中选择距离：比如说10英里（谷歌地图设置为米），当他们点击提交时，绘制一个半径为10英里的圆圈。

如代码所示，绘制点但是，圆圈不会出现。

例如，如果我将distance1 = document.getElementById("distance").value;替换为distance1 = 16999;，则会出现一个圆圈并且效果非常好。

对我来说，这必须意味着distance1从表单中提取时的内容有问题。我做了一个NaN测试只是为了确定它报告内容是一个数字。

我的问题是（以非常漫长的方式 - 抱歉）您是否知道如何让distance1从表单中获取值。

// Add circle overlay and bind to marker var circle = new google.maps.Circle({ map: map, radius: distance1, strokeWeight: 0, fillColor: '#AA0000' });

有问题的部分是radius: distance1

Answer 1

可能有助于确保它是一个数字，而不是一个字符串。

distance1 = parseFloat(document.getElementById("distance").value);

（parseInt可能也可以正常工作，因为它以米为单位，小数表不会有太大差别）

Google Maps API V3 - Javascript问题

1 个答案: