当前位置： 代码迷 >> JavaScript >> 如何将变量传递给我的回调函数或类似函数
  详细解决方案

如何将变量传递给我的回调函数或类似函数

热度：59   发布时间：2023-06-05 09:34:54.0

问题描述

我知道无法完全按照标题中的说明进行操作，但是我真的不确定要达到所需的结果该怎么做。

这是代码： 

 var map; // Filters var filterArray = [ {filter: 'school', icon: 'assets/img/mapMarkerIcos-schools.png', markersArray: 'schoolMarkers'}, {filter: 'restaurant', icon: 'assets/img/mapMarkerIcos-restaurants.png', markersArray: 'restaurantMarkers'}, {filter: 'subway_station', icon: 'assets/img/mapMarkerIcos-stations.png', markersArray: 'stationMarkers'}, {filter: 'convenience_store', icon: 'assets/img/mapMarkerIcos-shops.png', markersArray: 'shopMarkers'} ]; var schoolMarkers = []; var restaurantMarkers = []; var stationMarkers = []; var shopMarkers = []; //console.log(filterArray); // Map center coordinates var coords = [ parseFloat(document.getElementById('mapLatitude').value), parseFloat(document.getElementById('mapLongitude').value) ]; var area = new google.maps.LatLng(coords[0], coords[1]); var filter = document.getElementById('amenityType').value; // Add marker function function addMarker(props) { var marker = new google.maps.Marker({ position: props.geometry.location, title: props.name, address: props.vicinity, animation: google.maps.Animation.DROP, map:map }); // Set icon if it exists if(props.icon) { var icon = document.getElementById('markerIcon').value; marker.setIcon(icon); } // Create info window when clicked var contentString = '<h3>' + props.name +'</h3><span>' + props.vicinity + '</span>'; var infoWindow = new google.maps.InfoWindow({ content: contentString }); marker.addListener('click', function() { infoWindow.open(map, marker); }); google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); } // When the window has finished loading create our google map below google.maps.event.addDomListener(window, 'load', init); function init() { // Basic options for a simple Google Map // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions var mapOptions = { // How zoomed in you want the map to start at (always required) zoom: 14, // The latitude and longitude to center the map (always required) center: area, // How you would like to style the map. // This is where you would paste any style found on Snazzy Maps. styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"on"},{"color":"#eeeeee"},{"lightness":50}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}] }; // Get the HTML DOM element that will contain your map // We are using a div with id="map" seen below in the <body> var mapElement = document.getElementById('map'); // Create the Google Map using our element and options defined above map = new google.maps.Map(mapElement, mapOptions); // Request nearby amenities for every Filter, then store this in an array each for (i = 0; i < filterArray.length; i++) { var filterObj = filterArray[i]; var filter = filterObj.filter; console.log(filter); var markersArray = filterObj.markersArray; console.log(markersArray); var request = { location: area, radius: '2000', fields: ['name', 'geometry'], type: [filter] }; service = new google.maps.places.PlacesService(map); service.nearbySearch(request, callback); //var markersArray = this.markersArray; } // Add results to Array function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { //console.log(results); console.log('results found'); //markersArray.push(results); /* for (var i = 0; i < results.length; i++) { //console.log(results[i]); addMarker(results[i]); } */ } } } 
 html, body { margin: 0; } #map { height: 400px; width: 100%; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Interactive Map</title> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <input id="mapLatitude" type="hidden" value="51.571527"> <input id="mapLongitude" type="hidden" value="-0.149113"> <input id="amenityType" type="hidden" value="school"> <input id="markerIcon" type="hidden" value="assets/img/mapMarkerIcos-schools.png"> <div id="map"></div> <button class="mapFilter" data-filter="school">schools</button><br> <button class="mapFilter" data-filter="restaurant">restaurants</button><br> <button class="mapFilter" data-filter="subway_station">stations</button><br> <button class="mapFilter" data-filter="convenience_store">shops</button><br> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNPO77AnQOdXcUhisHtfu_RP0Ha3bZKn8&libraries=places"></script> <script src="assets/js/main.js"></script> </body> </html>

问题是我只是看不到将markersArray传递给回调的方法，所以我将能够将结果推送到相关的数组。

问题是注释'//为每个过滤器请求附近的便利设施，然后将其分别存储在数组中'

和评论“ //将结果添加到数组”中的回调

我现在尝试了很多不同的事情，但我茫然。

谢谢。

编辑：所需的结果是我循环4次并获得4个结果。 我需要将这4个结果放入4个单独的数组中。

1楼
 marekful  1  2019-02-21 12:02:54

您可以使用IIFE，而不是直接传递回调函数引用。 IIFE接收makersArray作为参数，并返回一个将作为回调的函数，但是在其主体中，可以使用传递给IIFE调用的参数。 

  for (i = 0; i < filterArray.length; i++) {

    //...

    service.nearbySearch(request, ((markersArray, counter) => 
      (results, status) => {
         // makersArray is available here
         // use results[counter] ...
      }
    )(markersArray, i));

  }

编辑：makersArray => markersArray

更新：因为您在for循环中调用了异步函数（service.nearbySearch），所以还需要将循环计数器传递给IIFE。 在此示例中，如果i在回调中，请使用counter 。

2楼
 Ritesh Kumar  0  2019-02-21 13:00:49

还有另一种方法可以从调用方中检索markersArray，我从调试代码中发现这种方法。 但是我不确定您将如何添加markersArray以显示在地图上。 这是我的观察，请在完成后发布您的工作代码，这将需要帮助来了解。

GIT回购： : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Interactive Map</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        html, body {
        margin: 0;
        }
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>

    <input id="mapLatitude" type="hidden" value="51.571527">
    <input id="mapLongitude" type="hidden" value="-0.149113">
    <input id="amenityType" type="hidden" value="school">
    <input id="markerIcon" type="hidden" value="assets/img/mapMarkerIcos-schools.png">

    <div id="map"></div>

    <button class="mapFilter" data-filter="school">schools</button><br>
    <button class="mapFilter" data-filter="restaurant">restaurants</button><br>
    <button class="mapFilter" data-filter="subway_station">stations</button><br>
    <button class="mapFilter" data-filter="convenience_store">shops</button><br>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNPO77AnQOdXcUhisHtfu_RP0Ha3bZKn8&libraries=places"></script>
    <script src="assets/js/main.js"></script>


    <script type="text/javascript">
        var map;

// Filters
var filterArray = [
    {filter: 'school', icon: 'assets/img/mapMarkerIcos-schools.png', markersArray: 'schoolMarkers'},
    {filter: 'restaurant', icon: 'assets/img/mapMarkerIcos-restaurants.png', markersArray: 'restaurantMarkers'},
    {filter: 'subway_station', icon: 'assets/img/mapMarkerIcos-stations.png', markersArray: 'stationMarkers'},
    {filter: 'convenience_store', icon: 'assets/img/mapMarkerIcos-shops.png', markersArray: 'shopMarkers'}
];
var schoolMarkers = [];
var restaurantMarkers = [];
var stationMarkers = [];
var shopMarkers = [];

//console.log(filterArray);

// Map center coordinates
var coords = [
    parseFloat(document.getElementById('mapLatitude').value),
    parseFloat(document.getElementById('mapLongitude').value)
];
var area = new google.maps.LatLng(coords[0], coords[1]);
var filter = document.getElementById('amenityType').value;

// Add marker function
function addMarker(props) {
    var marker = new google.maps.Marker({
        position: props.geometry.location,
        title: props.name,
        address: props.vicinity,
        animation: google.maps.Animation.DROP,
        map:map
    });
    // Set icon if it exists
    if(props.icon) {
        var icon = document.getElementById('markerIcon').value;
        marker.setIcon(icon);
    }
    // Create info window when clicked
    var contentString = '<h3>' + props.name +'</h3><span>' + props.vicinity + '</span>';
    var infoWindow = new google.maps.InfoWindow({
        content: contentString
    });
    marker.addListener('click', function() {
        infoWindow.open(map, marker);
    });
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
    });
}

// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);

function init() {
    var markersArray = null;
    // Basic options for a simple Google Map
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
    var mapOptions = {
        // How zoomed in you want the map to start at (always required)
        zoom: 14,

        // The latitude and longitude to center the map (always required)
        center: area,


        // How you would like to style the map. 
        // This is where you would paste any style found on Snazzy Maps.
        styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"on"},{"color":"#eeeeee"},{"lightness":50}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
    };

    // Get the HTML DOM element that will contain your map 
    // We are using a div with id="map" seen below in the <body>
    var mapElement = document.getElementById('map');

    // Create the Google Map using our element and options defined above
    map = new google.maps.Map(mapElement, mapOptions);

    // Request nearby amenities for every Filter, then store this in an array each
    for (i = 0; i < filterArray.length; i++) {
        var filterObj = filterArray[i];
        var filter = filterObj.filter;
        console.log(filter);
        markersArray = filterObj.markersArray;
        console.log(markersArray);
        var request = {
            location: area,
            radius: '2000',
            fields: ['name', 'geometry'],
            type: [filter]
        };
        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback, markersArray);
        //var markersArray = this.markersArray;
        <!-- service.nearbySearch(request, ((markersArray) =>  -->
          <!-- (result, status) => { -->
             <!-- // makersArray is available here -->
          <!-- } -->
        <!-- )(makersArray)); -->
        //
    }

    // Add results to Array
    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
        var args = arguments[2];
        var schoolList = arguments[2].j.caller.arguments[2].results;
            //console.log(results);
            console.log('results found');
            //markersArray.push(results);

            //for (var i = 0; i < results.length; i++) {
                //console.log(results[i]);
                //addMarker(results[i]);
            //}

        }
    }

}


    </script>
</body>
</html>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.