Question

我想使用Google Maps API和jQuery在地图上绘制多个圆圈。只要注释掉drawMapCircle（）的行（标记正确定位），下面的代码就可以工作。

我的代码出了什么问题？

$.getJSON(
    "ajax/show.php",
    function(data)
    {
        $.each(data.points, function(i, point)
        {
            map.addOverlay(new GMarker(new GLatLng(point.lat, point.lng)));
            drawMapCircle(point.lat, point.lng, 0.01, '#0066ff', 2, 0.8, '#0cf', 0.1);
        });
    }
);

function drawMapCircle(lat, lng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity)
{
    var d2r = Math.PI / 180;
    var r2d = 180 / Math.PI;
    var Clat = radius * 0.014483;  // statute miles into degrees latitude conversion
    var Clng = Clat/Math.cos(lat * d2r); 
    var Cpoints = []; 

    for (var i = 0; i < 33; i++)
    { 
        var theta = Math.PI * (i / 16);
        Cy = lat + (Clat * Math.sin(theta));
        Cx = lng + (Clng * Math.cos(theta));
        var P = new GLatLng(Cy, Cx);
        Cpoints.push(P);
    }

    var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
    map.addOverlay(polygon);
}

Javascript引发以下错误：

Error: a is undefined
Source: http://maps.gstatic.com/intl/de_ALL/mapfiles/208a/maps2.api/main.js
Line: 317
function Nh(){x(pd).sV();eval(arguments[1])}

Answer 1

你需要将从ajax调用返回的点值转换为浮点数~~，因为google api在收到字符串时似乎会窒息~~ ..

像这样使用parseFloat

drawMapCircle(parseFloat(point.lat), parseFloat(point.lng), 0.01, '#0066ff', 2, 0.8, '#0cf', 0.1);

更新回答 实际问题在于

行

Cy = lat + (Clat * Math.sin(theta));
Cx = lng + (Clng * Math.cos(theta));

字符串和数字之间的加法产生文本..并且由于两者都是浮点数，它以两个.小数分隔符结束，因此NaN ...

在Google地图中绘制多个圆圈

1 个答案: