Laravel和google地图:为每个纬度/经度显示标记或地图 - Laravel and google maps : foreach latitude/longitude show marker or map

Laravel and google maps : foreach latitude/longitude show marker or map

我有一个包含经度和纬度字段的表位置

对于每个位置，我想要一个新的地图(或者最好是一个新的标记)，它使用来自表位置的经纬度在地图上显示一个城市。

控制器索引动作:

public function index()
    {
        $locations = Location::all();
        $locations->location_latitude = Input::get('location_latitude');
        $locations->location_longitude = Input::get('location_longitude');
        return View::make('forecasts.index')
            ->with('locations', $locations);
    }

google map with marker:

function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var location = new google.maps.LatLng({{ $location->location_latitude }}, {{ $location->location_longitude }});
    var map_options = {
        center: location,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)
    var marker = new google.maps.Marker({
        position: location,
        map: map,
    });
    marker.setMap(map);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

当我这样做时，它只显示最后插入的纬度/经度的城市:

@foreach($locations as $location)
   var location = new google.maps.LatLng({{ $location->location_latitude }}, {{ $location->location_longitude }});
@endforeach

这可能是因为在循环遍历集合时，您实际上并没有创建单独的标记。

function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    // Initialise the map
    var map_options = {
        center: location,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)
    // Put all locations into array
    var locations = [
    @foreach ($locations as $location)
        [ {{ $location->location_latitude }}, {{ $location->location_longitude }} ]     
    @endforeach
    ];
    for (i = 0; i < locations.length; i++) {
        var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
        var marker = new google.maps.Marker({
            position: location,
            map: map,
        }); 
    }
    // marker.setMap(map); // Probably not necessary since you set the map above
}