如何解决ForLoop调用仅功能一次
我有一个fourLoop,它调用我的函数addMarker,但是我只得到一个循环的结果。我嵌套在循环中的控制台日志返回正确的数组长度。我对此问题感到好奇,因为我怀疑我对某些概念缺乏关注。这是针对Google地图,地点和地理编码API的(出于安全考虑,我删除了我的密钥,因此,如果您仅阅读initMap函数,则所有相关问题均位于该范围内)。
更新:我记录了“ loopData”,并且得到了正确的迭代次数,但它只是最后一个索引中的数据。这使我朝着错误出现在forLoop中,在该错误中我解析了初始响应从Google place API。那里的代码是这样的: (下面的代码块的目的是迭代对象数组,并在每次迭代中获取某些值,并将这些值推到收集到的对象的新数组“ placesDataLocations”。现在,我得到的是正确的数量个对象,但每个对象的值都与我的API响应数据中的LAST合格对象完全相同。)
const gym = {}
const placesDataLocations = []
for (let i = 0; i < placesData.results.length; i++) {
if (placesData.results[i].business_status === 'OPERATIONAL') {
// Array of Objects in form {gym: {id: 10,quantity: 10} }
gym.location = placesData.results[i].geometry.location
gym.name = placesData.results[i].name
gym.address = placesData.results[i].vicinity
placesDataLocations.push({ gym: gym })
}
}
console.log(placesDataLocations)
initMap(googleGeocodeLat,googleGeocodeLng,placesDataLocations)
})
UPDATE2:因此,我放弃了创建新对象数组的第一种方法,并尝试使用.map方法,如下所示:
const placesDataLocations = []
for (let i = 0; i < placesData.results.length; i++) {
if (placesData.results[i].business_status === 'OPERATIONAL') {
placesDataLocations.push({
placesData.results[i].map(data => {
return {
location: data.geometry.location,name: data.name,address: data.vicinity
}
})
})
}
} 现在,控制台告诉我“ placesData.results [i] .map”不是一个函数。有人可以看到我在做什么错吗?
const mapModal = document.querySelector('#googleMap')
const originalMapContent = mapModal.innerHTML
// displaying the map
function initMap (locationLatitude,locationLongitude,gymCoordinates) {
// Map options
const options = {
center: { lat: locationLatitude,lng: locationLongitude },zoom: 10
}
// New map
const map = new google.maps.Map(document.getElementById('googleMap'),options)
// Add markers
const marker = new google.maps.Marker({
position: { lat: locationLatitude,map: map
// icon: '...'
})
// const coordinates = gymCoordinates
for (let i = 0; i < gymCoordinates.length; i++) {
console.log(gymCoordinates.length);
addMarker(gymCoordinates[i])
}
// Add marker function - displays multiple different markers
function addMarker (loopData) {
const marker = new google.maps.Marker({
position: loopData.gym.location,map: map,icon: 'https://img.icons8.com/offices/2x/map-pin.png'
})
// Add infoWindow
const infoWindowContent = `<h6>${loopData.gym.name}</h6><div>${loopData.gym.address}</div>`
const infoWindow = new google.maps.InfoWindow({
content: infoWindowContent
})
// Function required to display the info window on map
marker.addListener('click',() => {
infoWindow.open(map,marker)
})
}
}
const apiKey = '&key=key-removed'
const searchButton = document.getElementById('gymFind')
searchButton.addEventListener('click',async function (e) {
e.preventDefault()
// getting the zip code input
const zipCode = document.querySelector('#userZip').value.trim()
const googleGeocodeAPI = `https://maps.googleapis.com/maps/api/geocode/json?address=${zipCode},US${apiKey}`
// call to API to grab latitude and longitude from the zip code user input
const res = await fetch(googleGeocodeAPI)
.catch(error => console.error({ error }))
const data1 = await res.json()
const googleGeocodeLat = data1.results[0].geometry.location.lat
const googleGeocodeLng = data1.results[0].geometry.location.lng
// console.log(lat,lng)
// Google Places API requires Proxy server header to enable cross-origin-resource-sharing (CORS)
var corsProxy = 'https://cors-anywhere.herokuapp.com/'
const googlePlacesAPI = `${corsProxy}https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${googleGeocodeLat},${googleGeocodeLng}&radius=4500&type=gym&keyword=exercise${apiKey}`
// call to API where list of gyms is generated using latitude and longitude of zip code
const res2 = await fetch(googlePlacesAPI)
.catch(error => console.error({ error }))
const placesData = await res2.json()
console.log(placesData)
const gym = {}
const placesDataLocations = []
for (let i = 0; i < placesData.results.length; i++) {
if (placesData.results[i].business_status === 'OPERATIONAL') {
// Array of Objects in form {gym: {id: 10,quantity: 10} }
gym.location = placesData.results[i].geometry.location
gym.name = placesData.results[i].name
gym.address = placesData.results[i].vicinity
placesDataLocations.push({ gym: gym })
}
}
console.log(placesDataLocations)
initMap(googleGeocodeLat,placesDataLocations)
})
const modalCloseButton = document.querySelector('#modal-close-button')
// clearing the contents of the map modal on close to prepare for the next query
modalCloseButton.addEventListener('click',function (e) {
e.preventDefault()
mapModal.innerHTML = originalMapContent
})
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!--Import materialize.css-->
<link
type="text/css"
rel="stylesheet"
href="assets/css/materialize.min.css"
media="screen,projection"
/>
<link type="text/css" rel="stylesheet" href="assets/css/main.css" />
<script
defer
src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"
integrity="sha384-g5uSoOSBd7KkhAMlnQILrecxvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ"
crossorigin="anonymous"
></script>
<style>
.section .card-image #foodImg {
height: 200 pX;
width: 100%;
}
</style>
<!--Let browser kNow website is optimized for mobile-->
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Nutrition & Health</title>
</head>
<body id="home" class="scrollspy">
<!-- SECTION Google Map and ZIP CODE-->
<div id="gymFinder" class="col s12 m4">
<div class="card">
<div class="card-content">
<h3> <span class="card-title"><u>Let's Get Healthy</u></span></h3>
<p style="font-size:20px">Please enter your zip code for a map of work-out places in your area. </p>
<div class="input-field">
<input onkeyup="numbersOnly(this)" type="text" id="userZip"/>
<label for="userZip">Zip Code</label>
</div>
</div>
<div id="gymFind" class="card-action">
<a href="#mapmodal" class="btn waves-effect waves-light modal-trigger" id="map-button">Find A Gym</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mapmodal" class="modal modal-fixed-footer">
<div class="modal-content">
<div id="googleMap" style="width:100%;height:100%;"></div>
</div>
<div class="modal-footer">
<a id="modal-close-button" href="#" class="teal modal-action modal-close waves-effect waves-green btn">Close</a>
</div>
</div>
<!-- SECTION: Footer-->
<section class="section teal darken-2 white-text ">
<div class="container">
Food Searcher© 2019
<a class="grey-text text-lighten-4 right" href="#!">Created by King Major</a>
</div>
</section>
<!--Import jQuery before materialize.js-->
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.2.1.min.js"
></script>
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase.js"></script>
<script type="text/javascript" src="assets/js/materialize.min.js"></script>
<!-- External Scrips -->
<script src="./assets/js/firebase.js"></script>
<script src="./assets/js/restricted_login.js"></script>
<script src="./assets/js/search.js"></script>
<!-- Google Maps Scripts -->
<script src="./assets/js/googlemap-test.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY-REMOVED&callback=initMap"></script>
<!-- Internal Scripts -->
<script>
$(document).ready(function() {
// Custom JS & jQuery here
// INIT SIDENAVE
$('.button-collapse').sideNav();
// INIT SLIDER
$('.slider').slider({
indicators: false,height: 300,transition: 700,interval: 6000
});
//INIT SCROLLSPY
$('.scrollspy').scrollSpy();
// INIT SELECT MENU
$('select').material_select();
//INIT MODALS
$('.modal').modal();
});
</script>
</body>
</html>
解决方法
您将在每次迭代中覆盖相同的对象,并将该对象推入数组。您需要一个全新的对象。
const placesDataLocations = []
for (let i = 0; i < placesData.results.length; i++) {
if (placesData.results[i].business_status === 'OPERATIONAL') {
// Array of Objects in form {gym: {id: 10,quantity: 10} }
const gym = {
location: placesData.results[i].geometry.location,name: placesData.results[i].name,address: placesData.results[i].vicinity
}
placesDataLocations.push({ gym: gym })
}
}
如果要使用地图,则还必须循环使用过滤器。
const placesDataLocations = placesData.results
.filter(function (result) {
return result.business_status === 'OPERATIONAL';
}).map( function(result) {
return {
gym: {
location: result.geometry.location,name: result.name,address: result.vicinity
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。