我知道这个问题似乎已经被问过了,但是我所看到的这些问题都无法回答我的问题,问题是从数据库获取经度和纬度数据时出现错误,并且无法在javascript部分的google map中显示标记,我可以正常地在视图中获取数据库(lan,lng),但是无法将它们作为标记打印在google map上,标记根本不显示,我想这是因为我把initMap()中的所有脚本。现在我要做的就是在google map上显示我的数据库数据(lan,lng)作为标记。任何帮助将不胜感激。对不起我的英语不好
代码
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--
@foreach ($position as $location)
<p>{{$location->lat}}</p>
<p>{{$location->long}}</p>
@endforeach
-->
<!--The div element for the map -->
<div id="map"></div>
<script src="https://js.pusher.com/5.0/pusher.min.js"></script>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
// var marker = new google.maps.Marker({position: uluru, map: map});
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('5945d552dbd1e6bb3107', {
cluster: 'ap2',
forceTLS: true
});
var channel = pusher.subscribe('location');
channel.bind("App\\Events\\SendLocation", function(data) {
// alert('An event was triggered with message: ' + data);
var uluru = {lat: parseFloat(data.location.lat), lng: parseFloat(data.location.long)};
var uluru= [
@foreach ($position as $location)
[ "{{ $location->lat }}", "{{ $location->long }}" ],
@endforeach
];
var marker = new google.maps.Marker({position: uluru, map: map});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my-api-key&callback=initMap"
async defer></script>
</body>
</html>
答案 0 :(得分:0)
最终我解决了我的问题,我使用Ajax做到了,效果很好,
也以这种方式显示了如何将数据库数据(lat,lng)带到地图上并作为标记打印(不使用Ajax)。希望对其他人有所帮助:)
var uluru = {lat: -25.344, lng: 131.036};
var locations = [
@foreach ($information as $location)
[ {{ $location->latitude }}, {{ $location->longitude }} ],
@endforeach
];
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
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,
});
};