Javascript 使用mysql（laravel）中的数据显示带有标记的google地图

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

今日上午：

现在，我正试图将marker自定义图标和信息窗口设置成这样（这是在没有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

@extends（'layouts.app'））
@节（“内容”）
//nazivMarkera}}；
var adresa={{$marker->adresa}；
var grad={{$marker->nazivGrada}；
var postanskibroj={{$marker->postanski_broj}；
var zupanija={{$marker->nazivzupanija}；
var html=“+sadrzaj+”
“+adresa+”、
“+postanskibroj+”、
“+grad+”、
“+zupanija；
var lat={{$marker->lat}；
var lng={{$marker->lng}；
var image={{$marker->slika}}；
var markerlatng=new google.maps.LatLng（parseFloat（lat），parseFloat（lng））；
var mark=new google.maps.Marker({
地图：地图，
职位：markerLatlng，
图标：图像
});
bindInfoWindow（标记、地图、infoWindow、html）；
@endforeach
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口打开（地图、标记）；
});
}
函数doNothing（）{}
//]]>
多布罗多什利！
@端部

当我检查页面时，我可以看到我的数据数组被填满了，我拥有数据库中的所有数据

有人能帮我解释一下问题出在哪里吗？为什么当我删除标记函数并只设置map init时，我得到的地图视图没有问题，而现在我甚至没有得到地图

现在：

你必须离开

var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:45.327168，lng:14.442902}，
缩放：13
});

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

似乎load（）不会在任何地方被调用

我还注意到，在您的屏幕截图中，laravel引用的变量周围没有引号

我会将laravel（刀片）从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?

---

当窗口准备就绪时，这将执行load（）函数。

如果您可以发布单独的问题，而不是将问题合并为一个问题，则最好是这样。这样，它可以帮助人们回答你的问题，也可以帮助其他人寻找至少一个你的问题。谢谢我很抱歉，因为那个，你们可以忽略关于刀片辛塔克斯的问题。我这里的主要问题是正确显示谷歌地图和标记！我不知道你是什么意思？如果您建议移动CDATA，这对您没有帮助。。。我不确定在代码中放置这个js的最佳位置，也许这就是问题所在？

google.maps.Map（document.getElementById（'Map'））

对于告诉maps您想要一个映射到

div

中的

id

的

Map

是至关重要的。您可以在javascript结束时调用

load（）

（在任何情况下都会在此处执行），或者将答案中突出显示的部分从javascript函数中取出，实际上在它之前。无论你怎么做，它都必须被执行谢谢你解释我的错误并给我一些提示，但我仍然没有带标记的工作地图。我尝试了onload、domstener，在div=“map”中调用脚本函数ps.doNothing（）来自google教程，当您使用xml文件作为数据时。忘记删除它。：）好的，我现在有了。我搬家了。函数在html标记之外（我不知道为什么…），并在脚本标记的末尾添加了domstener。一切正常，谢谢你的时间，我希望你能在js方面给我更多帮助：）仍然无法获得自定义图标。。。当我从数据库检查代码图像时，值是“img\/markers\/image.png”。。在数据库中，它保存为“img/markers/image.png”，这是否可能导致问题？

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