Я пытаюсь загрузить данные из API, а затем отображать его с помощью кругов. Я могу создавать маркеры с точками данных, но не с кругами. Я следую this example here from Google's documentation.Google Maps Circle
То, что я ожидаю, произойдет в for loop, используя center: new google.maps.LatLng(well.location.latitude, well.location.longitude), было бы достаточно, чтобы создать центральные точки. Однако это не работает. Все остальное совпадает с примером (будет изменено позже).
Я ожидал, что это сработает, потому что раньше в этом примере я мог использовать $.each для отображения маркеров с использованием field.location.latitude, field.location.longitude, который по сути является тем же самым (или так я думаю).
Могу ли я не создавать круги внутри функции $.getJSON, как я могу с помощью маркеров? Это происходит «не синхронизировано»? Я все еще пытаюсь научиться обрабатывать асинхронные события.
HTML:
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
CSS:
#map {
border: 1px solid black;
margin: 0 auto;
width: 500px;
height: 300px;
}
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
});
};
});
});
Почему, когда я запускаю один и тот же' for loop' дважды для создания перекрывающихся кругов, появляется только первый? Если I '/ ** /' из первого, второй работает так, как ожидалось. Однако ни одно из них не будет работать одновременно. http://jsfiddle.net/n4ye7eka/3/ – adin
Это другой вопрос, возможно, проблема с данными. – geocodezip
Этот пункт не имеет местоположения: «well_name»: «CITY OF ARVADA». Это генерирует ошибку javascript, которая останавливает обработку. – geocodezip