Question

我正在尝试让谷歌地图在我的项目中工作，但由于某些原因，当我尝试搜索localhost / front以访问该页面时，页面上没有任何内容显示。

master.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laramap</title>
    </meta>
    <link rel="stylesheet" href="{{asset('css/main.css')}}">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </link>


</head>
<body>

@yield('content')
<script crossorigin="anonymous" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" src="https://code.jquery.com/jquery-3.1.0.min.js">
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4NNeHbNb1_nFhKnckNxMKpxXeQUecenM"
        async defer></script>

<script src="={{asset('js/script.js')}}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>

</body>
</html>

front.blade.php

@extends('layouts.master')

@section('content')


  <div class="container">

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

@endsection

script.js

$(document).ready(function () {

    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        scrollwheel: false,
        zoom: 8
    });

});

的main.css

#map{

    heoght: 500px;
    width: 600px;
    margin: 0 auto;

}

web.php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();


Route::any('/home', 'HomeController@index')->name('home');

Route::group(['as' => 'user.'],function () {

    Route::get('/front',function () { return view('front');});
    Route::get('/settings',['as'=> 'settings','uses'=> 'ProfileController@viewSettings']);
    Route::post('/settings',['as'=> 'settings','uses'=> 'ProfileController@saveSettings']);
    Route::any('/profile/{userId}',['as'=> 'profile','uses'=> 'ProfileController@viewProfile']);

});

Answer 1

我必须在密钥的末尾添加.as-console-wrapper { max-height: 100% !important; top: 0; }

&libraries=places

地图没有出现在Laravel

1 个答案: