使用來自mysql（laravel）的數據顯示帶有標記的谷歌地圖

Question

我正在研究一個包含谷歌地圖和一堆標記的網絡應用程序。 今天早上我有從db工作地圖+標記（但我只用了一個數據表）。

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 

當我檢查網頁我可以看到我的數據數組填滿，我必須從數據庫中的所有數據。

picture 3 http://oi67.tinypic.com/211wky0.jpg

有人能幫助我，哪裏出了問題我解釋一下嗎？爲什麼當我刪除標記函數，並且只設置map init時，我沒有問題地圖視圖，現在我甚至都沒有得到地圖。

現在：

Answer 1

它看起來像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? 

我也是在代碼搞掂幾個小錯誤，如

1. 信息窗口被拼寫錯了您的綁定函數中「infowWindow」
2. 您的信息窗口聽衆需要綁定標記而不是標記
3. 您並不需要單獨提取標記中的每個變量

此外，您需要從某處調用load（）函數。也許把onLoad =「load（）」放在你的body對象或頂級div上。或者使用google DOM監聽器：

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

這將在窗口準備就緒時執行load（）函數。

Answer 2

你看哪離開

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

了評論區的，否則你不進行初始化。