使用 Laravel 5.3 json withCallback 添加奇怪的斜杠和星号答案

【问题标题】：Using Laravel 5.3 json withCallback adds strange slashes and asterisk使用 Laravel 5.3 json withCallback 添加奇怪的斜杠和星号
【发布时间】：2017-03-03 06:53:38
【问题描述】：

我有一个集合，我正试图将其作为 jsonp 传递到一个页面，然后我将使用该集合向 Google 地图添加标记。我正在关注this google tutorial。

我创建了一个包含如下位置集合的集合：

$results = \App\Location::all();
$c = collect([
  'type' => 'LocationCollection',
  'results' => $results
]);
return response()
 ->json( $c )
 ->withCallback('eqfeed_callback');

生成的数据看起来与 Google 示例数据 USGS 地震数据的格式非常相似，只是顶部有以下内容：

/**/

部分数据摘录：

/**/eqfeed_callback({"type":"LocationCollection","results":[{"id":1,"created_at":"2014-11-07 10:37:00","updated_at":"2016-10-11 09:44:31","deleted_at":null,"name":"West Pico Blvd","pathname":"west-pico-blvd-los-angeles","address":"5960 West Pico Blvd","address2":"","city_id":2,"city_name":"Los

在浏览器中出现错误：

lookup:1 Uncaught ReferenceError: eqfeed_callback is not defined(anonymous function) @ lookup:1

【问题讨论】：

请查看此帖stackoverflow.com/questions/19375033/…
看起来确实可以使用 Jagadesha。但我有一个不同的问题，但感谢您的链接。

标签： javascript laravel callback laravel-5.3

【解决方案1】：

事实证明，我遇到了另一个让我失望的错误。在我生成的 jsonp 数据中添加 /**/ 不会影响 JavaScript 摄取和使用。

Laravel 生成数据：

$c = collect([
  'type' => 'LocationCollection',
  'locations' => $results
]);
return response()
    ->json( $c )
    ->withCallback('eqfeed_callback');

返回的数据：

/**/eqfeed_callback({"type":"LocationCollection","locations":[{"id":1,"created_at":"2014-11-07 10:37:00","updated_at":"2016-10-11 09:44:31","deleted_at":null,"name":"West Pico Blvd","pathname":"west-pico-blvd-los-angeles","address":"5960 West Pico Blvd","address2":"","city_id":2,"city_name":"Los Angeles","state":"CA","zip":"90035","phone":"8182590690","map":"https:\/\/www.google.com\/maps\/place\/Love+Laundry\/@34.0517844,-118.3696481,17z\/data=!4m6!1m3!3m2!1s0x80c2b96cab1ef56f:0x420cbfd32fd1f342!2sLove+Laundry!3m1!1s0x80c2b96cab1ef56f:0x420cbfd32fd1f342","about":"Redefining the laundromat experience one load at a time. Come feel the LOVE and discover how visiting a laundromat doesn\u2019t have to be a creepy, dirty experience. We have new equipment with both coin-op and credit card machines. Flat-screen TVs, free Wi-Fi and plenty of LOVE.","lat":34.051785,"lng":-118.369652,"delivery":0,"is_comingsoon":0,"is_showcity":1},{"id":2,"created_at":"2014-11-07 10:38:00","updated_at":"2015-05-19 22:12:55","deleted_at":null,"name":"Midtown","pathname":"midtown-sacramento","address":"2431 K Street","address2":"","city_id":1,"city_name":"Sacramento","state":"CA","zip":"95816","phone":"9164699840","map":"https:\/\/www.google.com\/maps\/place\/Love+Laundry\/@38.5743584,-121.4738992,17z\/data=!4m6!1m3!3m2!1s0x0:0x2fa6246fdce95f0f!2sLove+Laundry!3m1!1s0x0:0x2fa6246fdce95f0f","about":"Without a doubt the cleanest, nicest laundromat in Sacramento. Come feel the LOVE! Watch our flat screen TVs and enjoy the free Wi-Fi. No more fumbling with quarters \u2013 many of our machines accept credit cards and an ATM is available on-site.\r\n<br \/><br \/>\r\nLOVE Laundry is not what you\u2019d expect from a laundromat.","lat":38.57436,"lng":-121.4739,"delivery":0,"is_comingsoon":0,"is_showcity":2},{"id":3,"created_at":"2015-01-21 09:00:00","updated_at":"2016-10-11 09:45:40","deleted_at":null,"name":"Long Beach Blvd","pathname":"long-beach-blvd","address":"6663 Long Beach Blvd","address2":"","city_id":3,"city_name":"Long Beach","state":"CA","zip":"90805","phone":"8182590690","map":"https:\/\/www.google.com\/maps\/place\/Love+Laundry\/@33.8752715,-118.2039546,15z\/data=!4m2!3m1!1s0x0:0x56363c43a8b6a3f1","about":"Located on Long Beach Boulevard just off the 91 Garden Freeway, near East Artesia Boulevard.","lat":33.874908,"lng":-118.203316,"delivery":0,"is_comingsoon":0,"is_showcity":0},{"id":4,"created_at":"2016-03-28 17:21:35","updated_at":"2016-10-11 15:13:15","deleted_at":null,"name":"South Sacramento","pathname":"south-sacramento","address":"7272 Franklin Blvd","address2":"","city_id":1,"city_name":"Sacramento","state":"CA","zip":"95823","phone":"9162469011","map":"https:\/\/www.google.com\/maps\/place\/7272+Franklin+Blvd,+Sacramento,+CA+95823\/@38.4940211,-121.4611898,17z\/data=!4m7!1m4!3m3!1s0x809acf91b719e8c7:0xca8af5a4c0fedcda!2s7272+Franklin+Blvd,+Sacramento,+CA+95823!3b1!3m1!1s0x809acf91b719e8c7:0xca8af5a4c0fedcda","about":"Our newest and largest location next to the Goodwill at Franklin Blvd and Florin Rd. This massive Love Laundry has tons of equipment and folding tables and of course drop-off service. Redefining the laundromat experience one load at a time. We have both coin-op and credit card machines. Flat-screen TVs, free Wi-Fi and plenty of LOVE.","lat":38.494022,"lng":-121.461189,"delivery":0,"is_comingsoon":0,"is_showcity":0},{"id":5,"created_at":"2016-03-28 17:40:10","updated_at":"2016-09-20 09:05:07","deleted_at":null,"name":"Davis","pathname":"davis","address":" 1776 East 8th St.","address2":"","city_id":5,"city_name":"Davis","state":"CA","zip":"95616","phone":"3235499870","map":"https:\/\/www.google.com\/maps\/place\/1776+E+8th+St,+Davis,+CA+95616\/@38.5534001,-121.7325997,17z\/data=!3m1!4b1!4m5!3m4!1s0x80852982cec097fb:0x77a22d925d059d7d!8m2!3d38.5534001!4d-121.7304057","about":"A new location coming soon to Davis, California.","lat":38.553482,"lng":-121.733162,"delivery":0,"is_comingsoon":1,"is_showcity":0},{"id":6,"created_at":"2016-03-30 09:49:58","updated_at":"2016-04-18 10:20:39","deleted_at":null,"name":"West Sacramento","pathname":"west-sacramento","address":"2907 West Capitol Avenue","address2":"","city_id":4,"city_name":"West Sacramento","state":"CA","zip":"95691","phone":"9163721432","map":"https:\/\/www.google.com.mx\/maps\/place\/Wash+%26+Dry+Launderland\/@38.5786957,-121.5495435,17z\/data=!4m7!1m4!3m3!1s0x809ad41073331f4d:0x14e7911493f0b596!2sWash+%26+Dry+Launderland!3b1!3m1!1s0x809ad41073331f4d:0x14e7911493f0b596?hl=en","about":"Recently remodeled, Love Laundry in West Sacramento is located on the Corner of Harbor and West Capitol, in the Goodwill shopping center. Be sure to try the best Wash & Fold in town!","lat":38.578697,"lng":-121.549545,"delivery":0,"is_comingsoon":0,"is_showcity":0}]});

页面上的Javascript：

  var map;

  function initMap() {
    var position = {lat: {{$mylocation->lat}}, lng: {{$mylocation->lng}} };
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: position
    });
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });

    var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading" style="color: #000;">Heading</h1>'+
      '<div id="bodyContent">'+
      '<p>Body</p>'+
      '<p>More Body</p>'+
      '</div>'+
      '</div>';

    var infoWindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 200
     });
    var script = document.createElement('script');
    script.src = '/lookup';
    document.getElementsByTagName('head')[0].appendChild(script);
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.locations.length; i++) {
          var latLng = new google.maps.LatLng(results.locations[i].lat,results.locations[i].lng);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: results.locations[i].name,
            icon: 'http://lovelaundry.com/assets/images/icons/love_google.png'
          });


            $('#mapnav').append('<a id="link_' + results.locations[i].id + '" class="btn btn-default btnMap">' + results.locations[i].name + '</a>');
            google.maps.event.addDomListener(document.getElementById("link_"+results.locations[i].id), "click", (function(position) {
                return function() {
                    map.setCenter(position);
                }
            })(position));

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    //infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.setContent('<div class="info_content"><h3>' + results.locations[i].name + '</h3><p>' + results.locations[i].address + '<br />' + results.locations[i].city_name + ', ' + results.locations[i].state + ' ' + results.locations[i].zip + '<br /><a href="tel:' + results.locations[i].phone + '">' + results.locations[i].phone + '</a></p></div>' );
                    infoWindow.open(map, marker);
                }
            })(marker, i));


        }
      }


  }

注意 var 映射；在 initMap 函数中

Google 地图教程将其置于函数之外，这可能导致频繁出现“google not found”错误。

【讨论】：