Laravel 地图标记未显示?
Laravel maps markers are not displaying?
我正在尝试让我的 google 地图标记显示到我的 laravel 项目中,但似乎显示了 none 个标记。我在地方上做了一个 dd() ,它表明它正在从数据库中获取信息。但由于某种原因 none 的标记似乎正在显示。
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=env(GOOGLE_MAPS_API_KEY)"></script>
<script src="={{asset('js/app.js')}}"></script>
<div id="map" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
var places = <?php echo json_encode($places); ?>;
console.log(places);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(56, -1.56),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < places.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(places[i][1], places[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(places[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
带控制器:
public function index()
{
//
$crags = DB::table('places')->get();
return view('users/map',compact('places'));
}
这也是我数组的第一项的样子:
0 => {#1312
+"id": 2
+"name": "stanage"
+"location": "sheffield"
+"latitude": 53
+"longitude": 2
+"created_at": "2022-03-03 21:36:49"
+"updated_at": "2022-03-03 21:36:49"
}
0 => {#1312
+"id": 2
+"name": "stanage"
+"location": "sheffield"
+"latitude": 53
+"longitude": 2
+"created_at": "2022-03-03 21:36:49"
+"updated_at": "2022-03-03 21:36:49"
}
您应该访问您的位置数据,例如 place[i].latitude,place[i].longitude 而不是 places[i][1]
marker = new google.maps.Marker({
position: new google.maps.LatLng(places[i].latitude, places[i].longitude),
map: map
});
我正在尝试让我的 google 地图标记显示到我的 laravel 项目中,但似乎显示了 none 个标记。我在地方上做了一个 dd() ,它表明它正在从数据库中获取信息。但由于某种原因 none 的标记似乎正在显示。
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=env(GOOGLE_MAPS_API_KEY)"></script>
<script src="={{asset('js/app.js')}}"></script>
<div id="map" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
var places = <?php echo json_encode($places); ?>;
console.log(places);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(56, -1.56),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < places.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(places[i][1], places[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(places[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
带控制器:
public function index()
{
//
$crags = DB::table('places')->get();
return view('users/map',compact('places'));
}
这也是我数组的第一项的样子:
0 => {#1312
+"id": 2
+"name": "stanage"
+"location": "sheffield"
+"latitude": 53
+"longitude": 2
+"created_at": "2022-03-03 21:36:49"
+"updated_at": "2022-03-03 21:36:49"
}
0 => {#1312
+"id": 2
+"name": "stanage"
+"location": "sheffield"
+"latitude": 53
+"longitude": 2
+"created_at": "2022-03-03 21:36:49"
+"updated_at": "2022-03-03 21:36:49"
}
您应该访问您的位置数据,例如 place[i].latitude,place[i].longitude 而不是 places[i][1]
marker = new google.maps.Marker({
position: new google.maps.LatLng(places[i].latitude, places[i].longitude),
map: map
});