在谷歌地图上绘制多个点，从数据库中提取坐标
[英]Plotting multiple points on google maps, coordinates fetched from database
问题描述
I'm working on a laravel project where one enters school coordinates and they are plotted on google maps. 
我正在进行一个laravel项目，其中一个进入学校坐标，它们被绘制在谷歌地图上。 I can fetch the coordinates via the controller but plotting it on the map is the issue. 我可以通过控制器获取坐标，但在地图上绘制是问题。
Here is my controller code for fetching the coordinates: 这是我获取坐标的控制器代码：
public function map_points(){
$points = DB::table('school_entries')
->select('longitude', 'latitude')
->get();
$point = array();
foreach ($points as $value) {
$point[] = "{latlong: \"$value->latitude,$value->longitude\"}";
}
return json_encode($point);
}
Here is my json results of the points to be plotted: 这是我要绘制的点的json结果：
["{latlong: "30.5350077,-2.161562"}", "{latlong: "30.5480003,-2.0803146"}", "{latlong: "30.0738499,-2.1401087"}", "{latlong: "29.7041765,-2.6116944"}"]
Here is my javascript/ajax block of code to plot the points. 这是我的javascript / ajax代码块来绘制点数。
$(document).ready(function() {
$.ajax({
url: '/map-points',
type: 'GET',
dataType: 'json',
success: function( data ){
console.log(data);
var property_list = [data],
options = {
zoom: 8,
center: new google.maps.LatLng( -2.08, 30.54 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(
document.getElementById( 'map-canvas' ),
options
);
for( var index = 0; index < property_list.length; index++ ) {
var latlong = property_list[index]['latlong'].split(','),
latlng = new google.maps.LatLng( latlong[0], latlong[1] ),
marker = new google.maps.Marker( {position: latlng, map: map} );
marker.setMap( map );
};
},
error: function(){
output.text('There was an error loading the data.');
}
});
});
What might be wrong with my code it is not plotting the points? 我的代码可能有什么问题，它没有绘制积分？
2 个解决方案
解决方案1
0 2019-03-25 08:03:32
The php code to generate the co-ordinates data seems a little complicated - I'm sure you could simplify it like this 生成坐标数据的PHP代码看起来有点复杂 - 我相信你可以像这样简化它
$point = array();
foreach ($points as $value) {
$point[] = [
'lat'=>$value->latitude,
'lng'=>$value->longitude
];
}
return json_encode( $point );
and also then modify the javascript callback 然后修改javascript回调
for( var n in property_list ){
obj = property_list[n];
latlng = new google.maps.LatLng( obj.lat, obj.lng );
marker = new google.maps.Marker( { position: latlng, map: map } );
}
So: I took your basic code and the modification I suggested to test to see why you were getting the error. 所以：我接受了你的基本代码和我建议的修改测试，看看为什么你得到错误。 I put together the following demo which correctly plots markers on the map. 我把以下演示放在一起，在地图上正确绘制标记。 You will need to excuse the fact that it is based upon a different database with no Laravel code - the important bit is the javascript that process the response data. 你需要原谅它是基于一个没有Laravel代码的不同数据库 - 重要的是处理响应数据的javascript。 I hope it helps solve your issue. 我希望它有助于解决您的问题。
<?php
error_reporting( E_ALL );
ini_set( 'display_errors', 1 );
if( $_SERVER['REQUEST_METHOD']=='GET' && !empty( $_GET['action'] ) && $_GET['action']='fetch-coordinates' ){
ob_clean();
/* emulate the remote script */
$dbport = 3306;
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'xxx';
$db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
$sql= 'select `lat`,`lng` from `maps`';
$res=$db->query( $sql );
$data=[];
while( $row=$res->fetch_object() ){
$data[]=[
'lat'=>$row->lat,
'lng'=>$row->lng
];
}
http_response_code( 200 );
header('Content-Type: application/json');
exit( json_encode( $data ) );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='//code.jquery.com/jquery-latest.js'></script>
<title>jQuery: Fetch data from db for Google Maps</title>
<style>
#map-canvas{width:80%;height:80vh;float:none;margin:auto;border:1px solid black;}
</style>
<script>
$( document ).ready(function() {
$.ajax({
url: '/map-points',
type: 'GET',
dataType: 'json',
data:{ action:'fetch-coordinates' },
success: function( data ){
var options = {
zoom: 8,
center: new google.maps.LatLng( -2.08, 30.54 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), options );
for( var n in data ){
var obj = data[ n ];
var latlng = new google.maps.LatLng( obj.lat, obj.lng );
var marker = new google.maps.Marker( { position: latlng, map: map } );
}
},
error: function(e){
output.text('There was an error loading the data.');
}
});
});
</script>
<script src='//maps.googleapis.com/maps/api/js?key=xxxxoFYApo9VMdJzE04tAxxxx'></script>
</head>
<body>
<div id='map-canvas'></div>
</body>
</html>
解决方案2
0 2019-03-25 10:57:51
I solved it by simply having to fetch data from the controller as is(since laravel return json objects) like the below function : 我只需要从控制器中获取数据就可以解决它（因为laravel返回json对象），如下面的函数：
public function map_points(){
$points = SchoolEntry::select('longitude', 'latitude')->get();
return json_encode($points);
}
and in my javascript had to do the following to plot the point 并在我的JavaScript中必须执行以下操作来绘制点
var property_list = data,
options = {
zoom: 8,center: new google.maps.LatLng( -2.08, 30.54 ),mapTypeId: google.maps.MapTypeId.ROADMAP },
map = new google.maps.Map(document.getElementById( 'map-canvas' ),options);
for( var index = 0; index < property_list.length; index++ ) {
console.log(property_list[index]);
var latlong = property_list[index],
latlng = new google.maps.LatLng( latlong.longitude, latlong.latitude ),
marker = new google.maps.Marker( {position: latlng, map: map} );
marker.setMap( map );
};
The above plotted the points perfectly. 以上完美地绘制了这些点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.