【问题标题】:How to load data from a DB(mysql) into the google maps API(laravel)如何将数据库(mysql)中的数据加载到谷歌地图 API(laravel)中
【发布时间】:2018-01-28 11:07:13
【问题描述】:

所以我有这个 laravel 应用程序,我需要我的谷歌地图 API 来加载一些标记。我将每个标记的 lat 和 lng 存储在我的数据库中,我想将所有这些数据传递到谷歌地图 API 的脚本中:

    function initMap() {
    var lafarinera = {lat: 41.934029, lng: 2.265616};
    var vic = {lat: 41.930445, lng: 2.254321};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: vic
    });
    var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h3 id="firstHeading" class="firstHeading">La Farinera</h3>'+
    '<img src="">'+
    '<div id="bodyContent">'+
    '<p> 84, Carrer de Sant Jordi, 82, 08500 Vic, Barcelona </p>'+
    '<button type="button" class="btn btn-primary">Informacio</button>'+
    '</div>'+
    '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 200
        });
            var marker_lafarinera = new google.maps.Marker({
            position: lafarinera,
            map: map,
            title: 'La farinera'
        });
        marker_lafarinera.addListener('click', function() {
            infowindow.open(map, marker_lafarinera);
        });
    }


这样,它只通过一个标记就可以工作,因为我有 lat 和 lng 静态但我想要的只是传递来自 de db 的所有数据,这样我就可以在我的 .js 中使用它。

【问题讨论】:

    标签: javascript php mysql laravel google-maps-api-3


    【解决方案1】:

    你需要在script标签中添加markers数组或者通过ajax获取

    <script>
      var markers= @json($markers);
    
      $.each(markers as marker,function(){
          addMarkerToMap(marker);
      });
    
      function addMarkerToMap(marker){
    
            var location = new google.maps.LatLng(marker.latitude,marker.longitude);
    
            marker = new google.maps.Marker({
                position: location,
                map: map,
            });
    
      });
    </script>
    

    【讨论】:

    • 直到今天我才能尝试它,但它有效,如果我 console.log(markers) 我从 de DB 中获取我想要传递的所有数据。非常感谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-09-15
    • 1970-01-01
    • 1970-01-01
    • 2012-09-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多