Javascript 谷歌地图圈

我试图从API加载数据，然后使用圆圈显示它。我可以用数据点创建标记，但不能创建圆。我跟在后面

我希望在

for循环中使用
中心：新的google.maps.LatLng（well.location.latitude，well.location.longitude）
即可创建中心点。然而，这似乎不起作用。其他内容与示例相同（稍后将进行修改）

我认为这是可行的，因为在前面的示例中，我能够使用
$。每个
使用
field.location.latitude，field.location.longitude
来显示标记，这基本上是相同的（或者我认为是相同的）

我不能像使用标记一样在
$.getJSON
函数中画圆圈吗？这是“不同步”吗？我仍在努力学习如何处理异步事件


HTML:

JavaScript

var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;

function initMap() {
    mapProp = {
        center: new google.maps.LatLng(39.0, -105.782067),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);
    infoWindow = new google.maps.InfoWindow({
        content: "hello world"
    });
};

function addMarker(lat, lng) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map
    });
    markers.push(marker);
    //console.log(markers);
};
$(document).ready(function() {
    url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
    initMap();
    $.getJSON(url, function(data) {
        //console.log(data);
        for (var i = 0; i < data.length; i++) {
            //console.log(data[i].location.latitude + ", " + data[i].location.longitude);
        };
        $.each(data, function(i, field) {
            addMarker(field.location.latitude, field.location.longitude);
        });
        for (var well in data) {
            wellCircle = new google.maps.Circle({
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: new google.maps.LatLng(well.location.latitude,
                    well.location.longitude),
                radius: 100000
            });
        };
    });
});

var映射；
var-mapProp；
var-url；
var标记；
var标记=[]；
var信息窗口；
var wellCircle；
函数initMap（）{
mapProp={
中心：新google.maps.LatLng（39.0，-105.782067），
缩放：6，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=新的google.maps.map（document.getElementById（“map”），mapProp）；
infoWindow=新建google.maps.infoWindow({
内容：“你好，世界”
});
};
功能添加标记器（lat、lng）{
marker=新的google.maps.marker({
位置：新google.maps.LatLng（lat，lng），
地图：地图
});
标记器。推（标记器）；
//控制台日志（标记）；
};
$（文档）.ready（函数（）{
url='1〕https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500'；
initMap（）；
$.getJSON（url、函数（数据）{
//控制台日志（数据）；
对于（变量i=0；i
标记的代码是正确的，但有些数据项没有
位置属性，这就是代码无法完全工作的原因

如果要添加圆而不是标记，可以使用
$。每个
循环只需在添加点之前检查
位置
块

下面是一个工作示例：（抱歉，没有使用您的链接，因为我没有看到您的链接）

具体而言，以下是我调整的代码：

var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;

function initMap() {
    mapProp = {
        center: new google.maps.LatLng(39.0, -105.782067),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);
    infoWindow = new google.maps.InfoWindow({
        content: "hello world"
    });
};

function addMarker(lat, lng) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map
    });
    markers.push(marker);
};
$(document).ready(function() {
    url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
    initMap();    
    $.getJSON(url, function(data) {
        //console.log(data);
        //for (var i = 0; i < data.length; i++) {
        //    console.log(data[i].location.latitude + ", " + data[i].location.longitude);
        //};
        $.each(data, function(i, field) {
            if(field.location) {
                 wellCircle = new google.maps.Circle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: new google.maps.LatLng(field.location.latitude,
                        field.location.longitude),
                    radius: 100000
                });
            } else {
                console.log("Missing location for this data item");
            }
        });
    });
});

var映射；
var-mapProp；
var-url；
var标记；
var标记=[]；
var信息窗口；
var wellCircle；
函数initMap（）{
mapProp={
中心：新google.maps.LatLng（39.0，-105.782067），
缩放：6，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=新的google.maps.map（document.getElementById（“map”），mapProp）；
infoWindow=新建google.maps.infoWindow({
内容：“你好，世界”
});
};
功能添加标记器（lat、lng）{
marker=新的google.maps.marker({
位置：新google.maps.LatLng（lat，lng），
地图：地图
});
标记器。推（标记器）；
};
$（文档）.ready（函数（）{
url='1〕https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500'；
initMap（）；
$.getJSON（url、函数（数据）{
//控制台日志（数据）；
//对于（变量i=0；i

如您所见，如果（field.location）
您的标记代码是正确的，您只需检查
，但有些数据项没有
location
属性，这就是您的代码无法完全工作的原因

如果要添加圆而不是标记，可以使用
$。每个
循环只需在添加点之前检查
位置
块

下面是一个工作示例：（抱歉，没有使用您的链接，因为我没有看到您的链接）

具体而言，以下是我调整的代码：

var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;

function initMap() {
    mapProp = {
        center: new google.maps.LatLng(39.0, -105.782067),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);
    infoWindow = new google.maps.InfoWindow({
        content: "hello world"
    });
};

function addMarker(lat, lng) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map
    });
    markers.push(marker);
};
$(document).ready(function() {
    url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
    initMap();    
    $.getJSON(url, function(data) {
        //console.log(data);
        //for (var i = 0; i < data.length; i++) {
        //    console.log(data[i].location.latitude + ", " + data[i].location.longitude);
        //};
        $.each(data, function(i, field) {
            if(field.location) {
                 wellCircle = new google.maps.Circle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: new google.maps.LatLng(field.location.latitude,
                        field.location.longitude),
                    radius: 100000
                });
            } else {
                console.log("Missing location for this data item");
            }
        });
    });
});

var映射；
var-mapProp；
var-url；
var标记；
var标记=[]；
var信息窗口；
var wellCircle；
函数initMap（）{
mapProp={
中心：新google.maps.LatLng（39.0，-105.782067），
缩放：6，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=新的google.maps.map（document.getElementById（“map”），mapProp）；
infoWindow=新建google.maps.infoWindow({
内容：“你好，世界”
});
};
功能添加标记器（lat、lng）{
marker=新的google.maps.marker({
位置：新google.maps.LatLng（lat，lng），
地图：地图
});
标记器。推（标记器）；
};
$（文档）.ready（函数（）{
url='1〕https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500'；
initMap（）；
$.getJSON（url、函数（数据）{
//console.lo
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;

function initMap() {
    mapProp = {
        center: new google.maps.LatLng(39.0, -105.782067),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), mapProp);
    infoWindow = new google.maps.InfoWindow({
        content: "hello world"
    });
};

function addMarker(lat, lng) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map
    });
    markers.push(marker);
};
$(document).ready(function() {
    url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
    initMap();    
    $.getJSON(url, function(data) {
        //console.log(data);
        //for (var i = 0; i < data.length; i++) {
        //    console.log(data[i].location.latitude + ", " + data[i].location.longitude);
        //};
        $.each(data, function(i, field) {
            if(field.location) {
                 wellCircle = new google.maps.Circle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: new google.maps.LatLng(field.location.latitude,
                        field.location.longitude),
                    radius: 100000
                });
            } else {
                console.log("Missing location for this data item");
            }
        });
    });
});

for (var i=0; i < data.length; i++) {
    var wellCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
        radius: 10000
    });
};

$.each(data, function(i, well) {
    var wellCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
        radius: 10000
    });
});