将数据传递给另一个函数答案

【问题标题】：Passing data to another function将数据传递给另一个函数
【发布时间】：2018-12-06 05:40:44
【问题描述】：

我从 Json 中抓取数据并在 queryLat/queryLng 中包含数组，之后我创建了另一个函数 initMap 并将其绑定到谷歌脚本。但是我很难将 queryLat 和 queryLng 传递给 initMap。弹出“queryLat 未定义”。我如何将这些传递给 initMap。

    var queryLat = [];
    var queryLng = [];

    @foreach($estates as $est)
        var result = $.getJSON({
                url: 'https://maps.googleapis.com/maps/api/geocode/json?address={{$est->address}}&key={{env('GOOGLE_MAPS_API')}}'
            });

        result.done(function(data) {

            queryLat = data.results[0].geometry.location.lat;
            queryLng = data.results[0].geometry.location.lng;
        });
    @endforeach


    function initMap()
    {
        var options =
            {
                zoom : 10,
                center : {lat:34.652500, lng:135.506302}
            }

        var map  = new
            google.maps.Map(document.getElementById("map"), options);


        for (var i = 0; i < queryLat.length; i++)
        {
            var newMarker = new google.maps.Marker
            ({
                position: {lat: queryLat[i], lng: queryLng[i]} ,
                map: map
            });
        }

    }

【问题讨论】：

不要在@foreach 中再次定义这些变量
queryLat 和 queryLng 覆盖 $estates 的最后一个索引结果上的值。如果您需要最后一个结果，请不要使用循环。还有一件事，您的地图加载异步，可能您的 $getJSON 在此之前没有完成，这会影响分配空值为 lat 和 lng
非常感谢已经解决了但是如何迭代标记？ @Sachink
将queryLat 和queryLng 设为数组。并将其循环用于标记:) for (var i = 0; i < queryLat.length; i++) { var newMarker = new google.maps.Marker({ position: {lat: queryLat[i], lng: queryLng[i]} , map: map }); }
我之前做过同样的事情 :) 但实际上没有工作，控制台中没有错误，但地图中也没有标记。如果我不使用，那么我会得到一个标记:)) 我更新了代码，你可以检查一下吗？ @Sachink

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

对于多个标记，如果您在全局范围内定义数组，那么您必须将您的 lat 和 long 值推送到数组中，并且还需要更新标记变量以显示不同的标记。希望它可以帮助您获取多个标记。

var queryLat = []; var queryLng = [];

@foreach($estates as $est)
    var result = $.getJSON({
            url: 'https://maps.googleapis.com/maps/api/geocode/json?address={{$est->address}}&key={{env('GOOGLE_MAPS_API')}}'
        });

    result.done(function(data) {

        queryLat.push(data.results[0].geometry.location.lat);
        queryLng.push(data.results[0].geometry.location.lng);
    });
@endforeach

function initMap()
{
    var options =
        {
            zoom : 10,
            center : {lat:34.652500, lng:135.506302}
        }

    var map  = new
        google.maps.Map(document.getElementById("map"), options);


    for (var i = 0; i < queryLat.length; i++)
    {
        var new_marker_str = "newMarker"+i;
        new_marker_str = new google.maps.Marker
        ({
            position: {lat: queryLat[i], lng: queryLng[i]} ,
            map: map
        });
    }

}

【讨论】：

好吧，问题是有时没有标记，有时我刷新地图时会出现一两个标记:))
这基本上取决于您的 API 响应，您通过发送您的地址和请求从谷歌获取 lat lng 数据的位置..

【解决方案2】：

您应该在脚本开始的地方全局定义变量 queryLat 和 queryLng。

<script type="text/javascript">
var queryLat;
var queryLng;
@foreach($estates as $est)
    var result = $.getJSON({
            url: 'https://maps.googleapis.com/maps/api/geocode/json?address={{$est->address}}&key={{env('GOOGLE_MAPS_API')}}'
        });

    result.done(function(data) {
       queryLat = data.results[0].geometry.location.lat;
       queryLng = data.results[0].geometry.location.lng;

    });
@endforeach


function initMap()
{
    var options =
        {
            zoom : 12,
            center : {lat:34.652500, lng:135.506302}
        }

    var map  = new
        google.maps.Map(document.getElementById("map"), options);

    var marker = new
        google.maps.Marker
        ({
           position: {lat: queryLat, lng: queryLng},
           map: map
        });
}

【讨论】：

顺便问一下，我怎样才能重复标记？因为查询是数组，你能告诉我吗_/

【解决方案3】：

问题出在这段代码中：

url: 'https://maps.googleapis.com/maps/api/geocode/json?address={{$est->address}}&key={{env('GOOGLE_MAPS_API')}}'

您已用撇号括起字符串，但字符串也包含撇号。

改用这个：

url: "https://maps.googleapis.com/maps/api/geocode/json?address={{$est->address}}&key={{env('GOOGLE_MAPS_API')}}"

【讨论】：

感谢您的建议，但没有效果仍然没有标记。