ブレード配列からPHPの配列をvue jsファイルに渡したいhtml

Question

私はlaravelフレームワークでvue.jsのgoogle map apiとphpのfacebookのグラフapiを使って作業しています。私は、Facebookのグラフapiから来るその場所の経度と緯度の配列をGoogle map apiに表示する必要があります。場所の配列はphpクラスの関数から来ていて、グラフはvue.jsファイルに形成されています。そして今、私はvue.jsでphp配列を取得することができます地図上にそれらの場所を表示します。

とコントローラで

var app = new Vue({ 
 

 
\t el: '#app', 
 
\t mounted(){ 
 
    \t \t var self = this; 
 
    \t \t this.$on('google.maps:init', function(){ 
 
    \t \t self.createMap() 
 
    \t }); 
 
    \t }, 
 
    data:{ 
 
    lat : '' 
 
    }, 
 
\t methods: { 
 
\t \t facebookCheckins : function(){ 
 
     var map= new google.maps.Map(document.querySelector('#map'),{ 
 
     center: {lat: 35, lng: -85}, 
 
      zoom:12 
 
     }); 
 
     for (var i = lat.length - 1; i >= 0; i--) { 
 
      \t 
 
\t \t \t  var marker = new google.maps.Marker({ 
 
\t \t \t  position: {lat: lat[i]['latitude'] , lng: lat[i]['longitude']}, 
 
\t \t \t  map: map, 
 
\t \t \t  title:place['name'] 
 
\t \t  \t }); 
 
     } 
 
    } 
 
\t } 
 
});

<div id="app"> 
 
\t <h5><?php echo $lat ?></h5> 
 
\t <form @submit.prevent="facebookCheckins"> 
 
    <!-- **here i'm passing that array in js file** --> 
 
\t \t <input type="hidden" id="lat" v-model="{{$lat}}" name="lat_lng"> 
 
\t \t <button type="submit">Locate</button> 
 
\t </form> 
 
\t 
 
    \t <div id="map"></div> 
 
\t </div> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
\t <script src="{{asset('js/facebook.js')}}"></script> 
 

 
\t <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdMD2WB2pMdBsWQqC7LOckwBywgWAd_WM&callback=app.facebookCheckins()" async defer></script>

// making object of class where facebook graph api code is written 
     $obj=new App\Place(); 
     $results=$obj->searchPlaces(31.55,74.375); 
     $resultsize=count($results); 
     for ($i=0; $i <$resultsize; $i++) { 
    // function in which longitude and latitude is find out 
      $place=$obj->placesInfo($results[$i]['id']); 
      $latitude=$place['location']['latitude']; 
      $longitude=$place['location']['longitude']; 
      $lat_lng[$i]= array('latitude' =>$latitude ,'longitude'=>$longitude); 
      $lat=json_encode($lat_lng); 
     } 

    return view('facebook_place_search')->withLat($lat); 

Answer 1

チェックもそれは動作します可能性があり

var app = new Vue({ 

    el: '#app', 
    mounted(){ 
     var self = this; 
     this.$on('google.maps:init', function(){ 
      self.createMap() 
     }); 
    }, 
    var lat = <?php echo $lat; ?> ; 
    methods: { 
     facebookCheckins : function(){ 
     var map= new google.maps.Map(document.querySelector('#map'),{ 
     center: {lat : lat[0].latitude, lng: lat[0].latitude}, 
      zoom:12 
     }); 
     for (var i = lat.length - 1; i >= 0; i--) { 

       var marker = new google.maps.Marker({ 
        position: {lat: lat[i].latitude , lng: lat[i].longitude}, 
        map: map, 
        title:place['name'] 
       }); 
     } 
    } 
    } 
});