duankuai6586 2017-11-13 06:44
浏览 27
已采纳

地图没有显示在我的jquery中

My problem is the google maps not showing when i trying to wrap my javascript code to jquery in my laravel app, this is screenshot:

enter image description here

but my console is not show the error code

this is my layout (master code)

master.blade.php

<!DOCTYPE html>
        <html>
            <head>
                <title>Laravel Maps</title>
                <meta name="viewport" content="initial-scale=1.0">
                <meta charset="utf-8">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
                <link rel="stylesheet" type="text/css" href="{{ asset('css/common.css') }}">
                @yield('style')
            </head>
            <body>

                @yield('content')

                <!-- JQuery -->
                <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
                <!--Common js -->
                <script src="{{ asset('js/common.js') }}"></script>
                <!-- Google maps js -->
                <script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDNqwhqdjvjjHzaiYNh-T8layzr-pQBcAs"></script>
                <!-- Bootstrap js -->
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            </body>
        </html>

My style code

common.css

#map {
        max-width: 100%;
        height: 500px;
        width: 600px;
        margin: 0 auto;
    }

index.blade.php

@extends('layouts.master')

    @section('content')
        <div class="container">
            <div id="map">

            </div>
        </div>
    @endsection

common.js

$(document).ready(function() {
        //initialize map
        var map;
        var myLat = new google.maps.LatLng(-33.8665433,151.1956316);
        //core map
        function createMap(myLat) {
            map = new google.maps.Map(document.getElementById('map'), {
                center: myLat,
                zoom: 12
            }); 
        }

        //marker
        function createMarker(latlng, icn, title) {
            var marker = new google.maps.Marker({
              position: latlng,
              icon: icn,
              Map: map,
              title: title
            });
        }

        function nearby(myLat, types) {
                //request location nearby
            var request = {
                location: myLat,
                radius: '2500',
                type: [types]
              };

            service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        var place   = results[i];
                        latlng      = place.geometry.location;
                        icn         = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                        title       = place.name;

              createMarker(latlng,icn,title);
                    }
                }
            }
        }

    });

I hope you can help me

  • 写回答

1条回答 默认 最新

  • duandu8202 2017-11-13 07:09
    关注

    Call to initiate createMap 

            var map;
        var myLat = new google.maps.LatLng(-33.8665433,151.1956316);
        function createMap(myLat) {
            map = new google.maps.Map(document.getElementById('map'), {
                center: myLat,
                zoom: 12
            }); 
        }
        
        //marker
        function createMarker(latlng, icn, title) {
            var marker = new google.maps.Marker({
              position: latlng,
              icon: icn,
              Map: map,
              title: title
            });
        }

        function nearby(myLat, types) {
                //request location nearby
            var request = {
                location: myLat,
                radius: '2500',
                type: [types]
              };

            service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        var place   = results[i];
                        latlng      = place.geometry.location;
                        icn         = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                        title       = place.name;

              createMarker(latlng,icn,title);
                    }
                }
            }
        }
        //to call createMap function
        createMap(myLat);
    #map {
        max-width: 100%;
        height: 500px;
        width: 600px;
        margin: 0 auto;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDNqwhqdjvjjHzaiYNh-T8layzr-pQBcAs"></script>


<div class="container">
 <div id="map">

 </div>
</div>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥50 如何实现uniapp编译的微信小程序做可回溯视频
  • ¥15 求Houdini使用行家，付费。价格面议。
  • ¥15 AttributeError: 'EasyDict' object has no attribute 'BACKUP_DB_INFO'
  • ¥15 前端高拍仪调用问题报错
  • ¥15 想用octave解决这个数学问题
  • ¥15 Centos新建的临时ip无法上网，如何解决？
  • ¥15 海康威视如何实现客户端软件对设备语音请求的处理。
  • ¥15 支付宝h5参数如何实现跳转
  • ¥15 MATLAB代码补全插值
  • ¥15 Typegoose 中如何使用 arrayFilters 筛选并更新深度嵌套的子文档数组信息