使用来自mysql（laravel）的数据显示带有标记的Google Map

Question

我正在开发一个包含Google地图和一堆标记的网络应用。 今天早上，我从db获得了工作的map + marks（但是我只使用了一张数据表）。

今天早上的ss：

现在，我正在尝试放置标记自定义图标和信息窗口，以获得类似的信息（这是在没有laravel的情况下制作的，只有php）。

这是我的代码：

@extends('layouts.app')

@section('content')
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[

        function load() {

            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 45.327168, lng: 14.442902},
                zoom: 13
            });

            var infoWindow = new google.maps.InfoWindow;

            @foreach($markers as $marker)
                var sadrzaj = {{$marker->nazivMarkera}};
                var adresa = {{$marker->adresa}};
                var grad = {{$marker->nazivGrada}};
                var postanskibroj = {{$marker->postanski_broj}};
                var zupanija = {{$marker->nazivZupanije}};

                var html = "<b>" + sadrzaj + "</b> <br/>" + adresa +",<br/>"+postanskibroj+" "+grad+",<br/>"+zupanija;

                var lat = {{$marker->lat}};
                var lng = {{$marker->lng}};
                var image = {{$marker->slika}};

                var markerLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));


                var mark = new google.maps.Marker({
                    map: map,
                    position: markerLatlng,
                    icon: image
                });

                bindInfoWindow(mark, map, infoWindow, html);
            @endforeach
        }

        function bindInfoWindow(mark, map, infoWindow, html){
            google.maps.event.addListener(marker, 'click', function(){
                infoWindow.setContent(html);
                infowWindow.open(map, mark);
            });
        }

        function doNothing(){}
        //]]>
    </script>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dobro došli!</div>

                <div class="panel-body">

                    <!-- Moj kod  -->

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




                    <!-- DO TU -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

当我检查页面时，我可以看到我的数组包含了数据，并且所有数据都来自db。

图片3 http://oi67.tinypic.com/211wky0.jpg

有人可以帮助我并向我解释问题出在哪里吗？ 为什么当我删除标记的功能并仅设置map init时，我会毫无问题地获得地图视图，而现在甚至都没有得到地图。

现在：

Answer 1

你有假

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.327168, lng: 14.442902},
    zoom: 13
});

超出注释区域，否则您不会初始化它。

Answer 2

看起来load（）没有在任何地方被调用。

我在您的屏幕快照中也注意到，laravel回显的变量周围没有引号。

我会把laravel（blade）留在javascript之外。 当前，您的foreach循环将转储javascript代码堆，这些代码将覆盖并重新声明变量。 这通常很杂乱，被认为是不良做法。

我还将使map成为全局变量，以防您以后需要操作它。

尝试这个：

    var map;
    var markers = {!! json_encode($markers) !!}; //this should dump a javascript array object which does not need any extra interperting.
    var marks = []; //just incase you want to be able to manipulate this later

    function load() {

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 45.327168, lng: 14.442902},
            zoom: 13
        });           

        for(var i = 0; i < markers.length; i++){
            marks[i] = addMarker(markers[i]);
        }
    }

    function addMarker(marker){
        var sadrzaj = marker.nazivMarkera};
        var adresa = marker.adresa;
        var grad = marker.nazivGrada;
        var postanskibroj = marker.postanski_broj;
        var zupanija = marker.nazivZupanije;

        var html = "<b>" + sadrzaj + "</b> <br/>" + adresa +",<br/>"+postanskibroj+" "+grad+",<br/>"+zupanija;


        var markerLatlng = new google.maps.LatLng(parseFloat(marker.lat),parseFloat(marker.lng));


        var mark = new google.maps.Marker({
            map: map,
            position: markerLatlng,
            icon: marker.slika
        });

        var infoWindow = new google.maps.InfoWindow;
        google.maps.event.addListener(mark, 'click', function(){
            infoWindow.setContent(html);
            infoWindow.open(map, mark);
        });

        return mark;
    }

    function doNothing(){} //very appropriately named function. whats it for?

我还修复了代码中的一些小错误，例如

1. 绑定函数“ infowWindow”中的信息窗口拼写错误
2. 您的infoWindow侦听器需要绑定以标记而不是标记
3. 您真的不需要单独从标记中提取每个变量

另外，您需要从某个地方调用load（）函数。 也许在您的身体对象或顶层div上放置onLoad =“ load（）”。 或使用Google DOM侦听器：

google.maps.event.addDomListener(window, 'load', load);

窗口准备好后，将执行load（）函数。