[英]How can I set points on google maps, using php and locations from database?
I have a database and a table named markers. 我有一个数据库和一个名为markers的表。 In this table there are the coordinates of specific locations that I want to mark on a map using Google maps. 在此表中,有一些我想使用Google地图在地图上标记的特定位置的坐标。 I can set the map on my website but when I try to use php to mark the locations I get this error "Uncaught TypeError: Cannot read property 'offsetWidth' of null". 我可以在网站上设置地图,但是当我尝试使用php标记位置时,出现此错误“ Uncaught TypeError:无法读取null的属性'offsetWidth'”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>X</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/estilos.css" rel="stylesheet">
<style type="text/css">
#map {
width: 100%;
height: 700px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
google.maps.event.addDomListener(window, 'load', init);
function init() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(40.2118735,-8.4240415,16);
styles: [ {featureType:"administrative",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:20}]}, {featureType:"road",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:40}]}, {featureType:"water",elementType:"all",stylers:[{visibility:"on"},{saturation:-10},{lightness:30}]}, {featureType:"landscape.man_made",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:10}]}, {featureType:"landscape.natural",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:60}]}, {featureType:"poi",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}, {featureType:"transit",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}]
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
}
});
</script>
</head>
<?php
include ('headbar.php');
require ('conexao.php');
$getpoints = mysql_query("SELECT * FROM markers");
if(!$result = $con->query($getpoints)){die('There was an error running the query [' . $con->error . ']');
} else {
while ($row = $result->fetch_assoc()) {
echo 'var myLatlng1 = new google.maps.LatLng('.$row[lat].', '.$row[lng].');
var marker1 = new google.maps.Marker({ position: myLatlng1, map: map, title:"'.$row[name].'"});';
}
}
?>
<body>
<div class="container-fluid">
<div id="map"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I can't figure out what the problem is, and I would appreciate some help with this. 我无法弄清楚问题出在哪里,对此我将提供一些帮助。
First store the PHP values into a javascript array 首先将PHP值存储到javascript数组中
At the top of your page: 在页面顶部:
require ('conexao.php');
$points = array();
$result = mysql_query("SELECT * FROM markers");
if(!$result){
die('There was an error running the query [' . $con->error . ']');
} else {
while ($row = mysql_fetch_assoc($result)) {
$points[] = array('lat' => $row['lat'], 'lng' => $row['lng'], 'name' => $row['name']);
}
}
<script type="text/javascript">
var points = <?php echo json_encode($points); ?>;
$(document).ready(function(){
google.maps.event.addDomListener(window, 'load', init);
function init() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(40.2118735,-8.4240415,16),
styles: [ {featureType:"administrative",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:20}]}, {featureType:"road",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:40}]}, {featureType:"water",elementType:"all",stylers:[{visibility:"on"},{saturation:-10},{lightness:30}]}, {featureType:"landscape.man_made",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:10}]}, {featureType:"landscape.natural",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:60}]}, {featureType:"poi",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}, {featureType:"transit",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}]
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
for (var i=0,l=points.length;i<l;i++) {
var latLng = new google.maps.LatLng(points[i].lat, points[i].lng);
var marker1 = new google.maps.Marker({ position: latLng, map: map, title:points[i].name});
}
}
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.