Uncaught TypeError: Не удается прочитать свойство '77 .597639984451 'of undefined

-2

Я знаю, что задаю аналогичный вопрос, который уже имеет много ответов. Но я не могу найти решение для своей проблемы. Здесь я использую Laravel 5.2, я пытаюсь получить latlng из базы данных mysql и отображать на карте. Я использую Google Maps api v2. Моя проблема заключается в том, что я получаю значения latlng в моей консоли, но я не могу отображать их на карте. здесь я прилагаю полный код. Любая помощь будет полезна.Uncaught TypeError: Не удается прочитать свойство '77 .597639984451 'of undefined

Это мой MapController.php

class MapController extends Controller 
{ 
public $type = 'Map'; 
public function getIndex() 
{ 

    $location = DB::table('eventdata')->simplePaginate(500); 
    return view('map.map')->with('location', $location); 
}

вот мой map.blade.php

<head> 
    <meta charset="utf-8"> 
    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByrgAtWpei65izUKYhdyr9-r54rrMZ8Zc&callback=initialize"> 
    </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="shortcut icon" href="{{ asset('ico/opengts.png') }}"> 
    <title>Open GTS</title> 

    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 

    <div class="navbar-wrapper"> 
     <div class="container"> 

      <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="navbar-brand active" href="#">Geo Punch Solution</a> 
        </div> 
        <div class="navbar-collapse collapse"> 
         <ul class="nav navbar-nav"> 
          <li class=""><a href="{{ url('/') }}">Home</a></li> 
          <li class=""><a href="{{ url('aboutUs') }}">About Us</a></li> 
          <li class=""><a href="{{ url('accountAdmin') }}">Account Admin</a></li> 
          <li><a href="{{ url('userAdmin') }}">User Admin </a></li> 

          <li><a href="{{ url('vehicleAdmin') }}">Vehicle Admin </a></li> 
          <li><a href="{{ url('groupAdmin') }}">Group Admin </a></li> 

          <li><a href="{{ url('geozoneAdmin') }}">Geozone Admin </a></li> 
          <li><a href="{{ url('changePassword') }}">Change Password </a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 

      <script> 
       function initialize() { 

        var map = document.getElementById('map'); 

        // Initialise the map 
        var map_options = { 
         center: location, 
         zoom: 10, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        var maps = new google.maps.Map(map, map_options); 

        // Put all locations into array 
        var locations = [ 
         @foreach ($location as $locations) 
         [ {{ $locations->latitude }}, {{ $locations->longitude }} ] 
         @endforeach 
         ]; 


        for (i = 0; i < locations.length; i++) { 
         var location = new google.maps.LatLng(locations[i][0], locations[i][1]); 

         var marker = new google.maps.Marker({ 
          position: location, 
          map: maps 
         }); 
        } 

        // marker.setMap(map); // Probably not necessary since you set the map above 

       } 


       function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
        infoWindow.setPosition(pos); 
        infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
       } 
       {{[email protected]}} 

      </script> 

      <style type="text/css"> 
       #map { 
        width: 1170px; 
        height: 570px; 
        margin-top: 100px; 
        margin-left: 100px; 
       } 
      </style> 
     </div> 
    </div> 
</head> 
<body> 

<div id="map"></div> 
<p id="error"></p> 
</body>

Я получаю сообщение об ошибке, как показано ниже.

Uncaught TypeError: Не удается прочитать свойство '77 0,597639984451' неопределенной

Пожалуйста, помогите мне .. Заранее спасибо

Примечание: Все Брекеты и тегах закрыта.

источник

2016-05-31 Rahul Vp

Что представляет собой сгенерированный JS для массива 'locations'? – duncan

Вы устанавливаете свой центр карты, используя это: 'center: location' ... где определяется' location' и как оно выглядит? – duncan

Также 'locations' элементы массива не разделены,' –

Как уже указывал Матей, вам не хватает запятой между элементами массива.

var locations = [ 
    @foreach ($location as $locations) 
    [ {{ $locations->latitude }}, {{ $locations->longitude }} ] 
    @endforeach 
];

Это дает вам это JS, которая не является действительным:

var locations = [ 
    [ 12.995250017848, 77.601860021241 ] 
    [ 13.003339979332, 77.597639984451 ] 
    [ 13.003339979332, 77.597639984451 ] 
];

Ваш код должен быть:

var locations = [ 
    @foreach ($location as $locations) 
    [ {{ $locations->latitude }}, {{ $locations->longitude }} ], 
    @endforeach 
];

Что бы тогда дать вам этот JS:

var locations = [ 
    [ 12.995250017848, 77.601860021241 ], 
    [ 13.003339979332, 77.597639984451 ], 
    [ 13.003339979332, 77.597639984451 ], 
];

(конечная запятая на последних элементах t не требуется и может быть помечен как недействительный с помощью любого инструмента для литья JS-кода, но в противном случае не должен вызывать никаких проблем).

Обновление: и вот простой способ, по крайней мере, предоставить карту с каким-либо центром, используя существующие места. Существуют более совершенные методы, такие как привязка карт к всем местоположениям, но вы не просили об этом.

Во-первых, создайте свой массив местоположений. Затем используйте первый, чтобы установить центр карты:

var locations = [ 
    @foreach ($location as $locations) 
    [ {{ $locations->latitude }}, {{ $locations->longitude }} ], 
    @endforeach 
]; 

// Initialise the map 
var map_options = { 
    center: {lat: locations[0][0], lng: locations[0][1]}, 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
var maps = new google.maps.Map(map, map_options);

источник

2016-05-31 12:15:18 duncan

; thanku soo much. Я вижу результат, как сказал, но я не могу видеть карту и маркер. Я вставил полный код в вопрос. Можете ли вы сказать, где я совершил ошибку? –

@RahulVp проблема выглядит так, как вы указываете центр карты в параметрах карты: 'center: location,' Где определено 'location'? – duncan

Uncaught TypeError: Не удается прочитать свойство '77 .597639984451 'of undefined

ответ

Смежные вопросы