Javascript 在谷歌地图的信息框中创建一个图像滑块
我有一个信息框,当在谷歌地图上点击一个标记时弹出,信息框应该显示一个图像滑块,但目前只显示一个没有任何滑块效果的图像Javascript 在谷歌地图的信息框中创建一个图像滑块,javascript,php,html,mysql,google-maps,Javascript,Php,Html,Mysql,Google Maps,我有一个信息框,当在谷歌地图上点击一个标记时弹出,信息框应该显示一个图像滑块,但目前只显示一个没有任何滑块效果的图像 <?php require 'connection.php'; $parent_id = $_GET['country']; $fid = $_GET['fid']; $sql = "SELECT * FROM features_for_office WHERE parent_id='".$parent_id."' and fi
<?php
require 'connection.php';
$parent_id = $_GET['country'];
$fid = $_GET['fid'];
$sql = "SELECT * FROM features_for_office WHERE parent_id='".$parent_id."' and fid='".$fid."' ";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0)
{?>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:2,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var infowindow = new google.maps.InfoWindow();
var markerArray = [];
var index =0;
var marker;
var markers = new Array();
var locations =[];
<?
while($row = mysqli_fetch_assoc($result))
{
$officeid= $row["officeid"];
$sql1 = "SELECT * FROM officeimage WHERE officeid='".$officeid."' ";
$result1 = mysqli_query($con, $sql1);
if (mysqli_num_rows($result1) > 0)
{
while($row1 = mysqli_fetch_assoc($result1))
{
$officelat= $row1["lat"];
$officelon= $row1["lon"];
$officetitle= $row1["officetitle"];
$offimage= $row1["offimage"];
//echo $officelat;
//echo $officelon;
?>
/*start marker*/
var values = [];
values.push("<?php echo "<img src=\'http://example.com/asd/" . $offimage . "\' height=\'100\' width=\'100\'/>"; ?>");
values.push("<?php echo $officelat; ?>");
values.push("<?php echo $officelon; ?>");
locations.push(values);
<?
}
?>
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
<?
}
}?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<?}
mysqli_close($con);
?>
您是否为滑块添加了任何代码?因为我无法在你的代码中找到它。这是初始代码,我没有在这里添加代码。如果我也显示我的滑块代码,那么它将是一个混乱的代码。目前我正在试用orbit Slider您检查过控制台了吗?它是否给出了任何错误?@Rohil_PHPBeginner是的,我给出了,但它没有显示任何错误确保您有超过1个图像:)您在jquery插件中使用了slider吗?
<head>
<style type="text/css">
#container{
height:50px;
width:50px;
margin:20px auto;
}
#img{
height:45px;
width:45px;
position:absolute;
}
#left-holder
{
height:40px;
width:20px;
left:0px;
top:0px;
position:absolute;
}
#right-holder
{
height:40px;
width:20px;
left:0px;
top:0px;
position:absolute;
}
.left
{
height:20px;
width:20px;
position:absolute;
top:10%
left:0px;
}
.right
{
height:20px;
width:20px;
position:absolute;
top:10%
right:0px;
}
</style>
<script type="text/javscript">
var imagecount=1;
var total=5;
function slide(x)
{
var Image = document.getElementById('img');
imagecount = imagecount+x;
Image.src = "Images/img"+ imagecount+ ".jpg";
}
</script>
</head>
<body>
<div id="container">
<img class="img"/>
<div id="left-holder"><img onClick="slide(-1)" class="left" src="img/left.png"></div>
<div id="right-holder"><img onClick="slide(1)" class="right" src="img/right.png"></div>
</div>
</body>