mysql标记不在地图上显示
晚安,即时尝试在JSON地图上显示标记,但我不能和我不知道为什么,我可以看到地图,并可以移动它,但即使没有一个标记正显示出,mysql标记不在地图上显示
<?php
require("config.php");
/* lat/lng data will be added to this array */
$locations=array();
$query = $db->query('SELECT * FROM inmuebles');
while($row = $query->fetch()){
$longitude = $row['long'];
$latitude = $row['lat'];
/* Each row is added as a new array */
$locations[]=array('lat'=>$latitude, 'long'=>$longitude);
}
/* Convert data to json */
$markers = json_encode($locations);
echo $markers;
?>
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
var map;
var markersArray = [];
function initMap() {
var latlng = new google.maps.LatLng(-16.5338955,-68.0656364);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, long;
var json=JSON.parse(markers);
for(var o in json){
lat = json[ o ].lat;
long=json[ o ].long;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,long),
map: map
});
google.maps.event.addListener(marker, 'click', function(e){
infowindow.setContent(this.name);
infowindow.open(map, this);
}.bind(marker));
}
}
</script>
的$标记输出
[{"lat":"-16.52629052070058","long":"-68.0797004699707"},{"lat":"-16.500122130208325","long":"-68.12089920043945"},{"lat":"-16.54307592346882","long":"-68.06425094604492"}]
在此先感谢我一直在试图真的很难看到那里的错误是
编辑
<?php
$con = mysqli_connect('localhost','waru','olairhead154','inmueble');
?>
<?php
require("config.php");
/* lat/lng data will be added to this array */
$locations=array();
$query = $db->query('SELECT * FROM inmuebles');
while($row = $query->fetch()){
$longitude = $row['long'];
$latitude = $row['lat'];
/* Each row is added as a new array */
$locations[]=array('lat'=>$latitude, 'long'=>$longitude);
}
/* Convert data to json */
$markers = json_encode($locations);
echo $markers;
?>
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
var map;
var markersArray = [];
function initMap() {
var latlng = new google.maps.LatLng(-16.5338955,-68.0656364);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var markers = '<?= json_encode($markers) ?>';
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, long;
var json=markers;
for(var o in json){
lat = json[ o ].lat;
long=json[ o ].long;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,long),
map: map
});
google.maps.event.addListener(marker, 'click', function(e){
infowindow.setContent(this.name);
infowindow.open(map, this);
}.bind(marker));
}
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
这是我所做的更改,但仍然没有显示即时通讯真正的新这个标记请
感谢
这是更好,如果你只是附和你的$我耐心标记 in var markers连同json_encode()函数。之后,您可以创建一个新的js变量var markersJson并且值为JSON.parse(markers)(您需要将其解析为JSON,否则会给您一个错误)。从那里,您可以使用javascript .map()函数(高阶函数)遍历数组,并将其显示为Google Maps标记。
有关Google地图标记的详细信息,请检查this链接。
样品从表inmuebles坐标:
<?php
$markers = array(
array('lat' => -16.52629052070058, 'lng' => -68.0797004699707),
array('lat' => -16.500122130208325, 'lng' => -68.12089920043945),
array('lat' => -16.54307592346882, 'lng' => -68.06425094604492)
);
?>
回声$标记与json_encode()为VAR标记:
var markers = '<?= json_encode($markers) ?>';
解析标记为JSON:
var markersJson = JSON.parse(markers);
迭代通过数组并显示坐标为Google地图标记
var plotMarkers = markersJson.map(function(value, index){
var marker = new google.maps.Marker({
position : new google.maps.LatLng(value.lat, value.lng),
map: map,
title : 'Hello'
});
return marker;
});
整个代码在这里:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps - PHP Markers Implementation</title>
<style type="text/css">
html,body {
height:100%;
}
body {
width:100%;
}
#map_canvas {
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
<script type="text/javascript">
<?php
$markers = array(
array('lat' => -16.52629052070058, 'lng' => -68.0797004699707),
array('lat' => -16.500122130208325, 'lng' => -68.12089920043945),
array('lat' => -16.54307592346882, 'lng' => -68.06425094604492)
);
?>
function initMap() {
var markers = '<?= json_encode($markers) ?>';
var markersJson = JSON.parse(markers);
var latlng = new google.maps.LatLng(-16.5338955,-68.0656364);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var plotMarkers = markersJson.map(function(value, index){
var marker = new google.maps.Marker({
position : new google.maps.LatLng(value.lat, value.lng),
map: map,
title : 'Hello'
});
return marker;
});
}
</script>
</body>
</html>
怎么可以我设法用for循环和mysql数据库来做到这一点?对不起,打扰 –
你从查询中得到结果吗? – rafon
当我回显$ marker变量时,我得到[{“lat”:“ - 16.52629052070058”,“long”:“ - 68.0797004699707”},{“lat”:“ - 16.500122130208325”,“long”:“ - 68.12089920043945”} ,{“lat”:“ - 16.54307592346882”,“long”:“ - - 68.06425094604492”}] 但看起来好像它没有进入脚本先谢谢 –
了 “$输出标志,” 不是一个JSON字符串,它是一个JavaScript数组,'JSON.parse'不会进行这项工作。直接传递给你的循环。 ([概念证明小提琴](http://jsfiddle.net/geocodezip/khe9eqj4/1/)) – geocodezip
@geocodezip尝试了你告诉我的,但我仍然看不到标记,你能帮我多一点吗? var markers =''; var map = new google.maps.Map(document.getElementById(“map_canvas”),myOptions); var infowindow = new google.maps.InfoWindow(),marker,lat,long; var json = markers; (json中的var o){ lat = json [o] .lat; long = json [o] .long; marker = new google.maps。标记({position:new google.maps.LatLng(lat,long), map:map }); –
1.请不要在评论中发布(大量)代码,这是不可读的(编辑你的问题以解决评论)。 2.如果我读过你发布的内容,那不是我“告诉你”的内容,请看小提琴。 – geocodezip