交替颜色行 - 不适用于两个侧边栏 [英] Alternating Color Rows - Not working for both sidebars
本文介绍了交替颜色行 - 不适用于两个侧边栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有2个侧边栏。一个侧边栏从mysql查询中给出排序结果，另一个侧边栏给出来往于某个位置的路线。我正在尝试交替mysql结果的行颜色和方向的行颜色。它正在为使用此代码的方向工作，但不适用于mysql结果。任何人都知道我如何才能做到这一点？谢谢
tr：nth-child（偶数）{background：#CCC}
tr：nth-child ）{background：#FFF}
<！DOCTYPE html>
< html>
< head>
< style>
html，
body，
#map_canvas {
margin：0;
padding：0;
身高：100％;
}
表，
tr，
td {
height：100％;
}
.text {
width：300px;
height：600px;
背景颜色：白色;
overflow：scroll;
overflow-y：auto;
overflow-x：hidden;
}
#side_bar {
z-index：100;
位置：绝对;
top：135px;
剩下：1050px;
}
#panel {
z-index：-100;
display：block;
位置：绝对;
top：135px;
剩下：1050px;
}
#mdiv {
z-index：500;
width：25px;
height：25px;
display：none;
背景颜色：红色;
border：1px纯黑色;
位置：绝对;
left：1300px;
top：112px;
}
.mdiv {
height：25px;
width：2px;
margin-left：12px;
背景颜色：黑色;
transform：rotate（45deg）;
-ms-transform：rotate（45deg）;
/ * IE 9 * /
-webkit-transform：rotate（45deg）;
/ * Safari和Chrome * /
z-index：1;
}
.md {
height：25px;
width：2px;
背景颜色：黑色;
transform：rotate（90deg）;
-ms-transform：rotate（90deg）;
/ * IE 9 * /
-webkit-transform：rotate（90deg）;
/ * Safari和Chrome * /
z-index：2;
}
tr：nth-child（偶数）{background：#CCC}
tr：nth-child（奇数）{background：#FFF}
< / style>
< / head>
< link rel =stylesheettype =text / csshref =assets / css / storelocator.css/>
< body>
< div class =bh-sl-container>
< div id =page-header>
< h1 class =bh-sl-title>审核定位器< / h1>
< / div>
< div class =bh-sl-form-container>
< form id =bh-sl-user-locationmethod =postaction =＃>
< div class =form-input>
< label for =bh-sl-address>输入地址或邮编：< / label>
< input type =buttonvalue =Submitonclick =codeAddress（）;>< / input>
< / div>
< / form>
< / div>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>
< table border =0>
< tr>
< td>
< div id =mapstyle =height：600px; width：1000px;>< / div>
< / td>
< td>
< div id =side_barclass ='text'>< / div>
< div id =panelclass ='text'>< / div>
< / td>
< / tr>
< / table>
< div id =info>< / div>
< div id =mdiv>
< div class =mdiv>
< div class =md>
< / div>
< / div>
< / div>
< script type =text / javascript>
var locations = [
<？php
$ servername =;
$ username =;
$ password =;
$ dbname =;
//创建连接
$ conn = new mysqli（$ servername，$ username，$ password，$ dbname）;
//检查连接
if（$ conn-> connect_error）{
die（Connection failed：。$ conn-> connect_error）;
$ sql =选择标识，名称，地址，纬度，lng，图标FROM标记;
$ result = $ conn-> query（$ sql）;
if（$ result-> num_rows> 0）{
//每行输出数据
while（$ row = $ result-> fetch_assoc（）） {
echo'['。$ row [name]。''。 '，'。 '''。$ row [address]。''''。'，'。 '''。$ row [lat]。'，'。$ row [lng]。''''。'，'。 '''。$ row [Icon]。']'。 ，;
}
} else {
echo0 results;
}
$ conn-> close（）;
？>
];
// alert（locations.length）;
var geocoder = null;
var map = null;
var customerMarker = null;
var gmarkers = [];
var closest = [];
var directionsDisplay = new google.maps.DirectionsRenderer（）;;
var directionsService = new google.maps.DirectionsService（）;
var map;
函数initialize（）{
// alert（init）;
geocoder = new google.maps.Geocoder（）;
map = new google.maps.Map（document.getElementById（'map'），{
zoom：9，
center：new google.maps.LatLng（52.6699927，-0.7274620），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var infowindow = new google.maps.InfoWindow（）;
var marker，i;
var bounds = new google.maps.LatLngBounds（）;
document.getElementById（'info'）。innerHTML =found+ locations.length +locations< br>;
for（i = 0; i< locations.length; i ++）{
var coordStr = locations [i] [2];
var coords = coordStr.split（，）;
var pt = new google.maps.LatLng（parseFloat（coords [0]），parseFloat（coords [1]））;
bounds.extend（pt）;
marker = new google.maps.Marker（{
position：pt，
map：map，
icon：locations [i] [3]，
address： location [i] [1]，
title：locations [i] [0]，
html：locations [i] [0] +< br>+ locations [i] +< br>< br>< a href ='javascript：getDirections（customerMarker.getPosition（），& quot;+ locations [i] [1] +& quot;）;'>获取路线< / a>
}）;
gmarkers.push（marker）;
google.maps.event.addListener（marker，'click'，（function（marker，i））{
return function（）{
infowindow.setContent（marker.html）;
infowindow.open（map，marker）;
}
}）
（marker，i））;
}
map.fitBounds（bounds）;
$（＃mdiv）。click（function（）{
$（＃side_bar）。css（{
z-index：100，
top：135px
}）;
$（＃panel）。css（z-index，-100）;
$（＃mdiv ）.css（display，none）;
}）
}
函数codeAddress（）{
var address = document 。.getElementById（ '地址'）值;
geocoder.geocode（{
'address'：address
}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
if（customerMarker）customerMarker.setMap（null）;
customerMarker = new google.maps.Marker（{
map：map，
position：results [0] .geometry.location
}）;
nearest = findClosestN（results [0] .geometry.location，12）;
/ /获得驾驶距离
closest = nearest.splice（0，12）;
calculateDistances（results [0] .geometry.location，closest，12）;
} else {
alert（'Geocode不成功，原因如下：'+ status）;
}
}）;
}
函数findClosestN（pt，numberOfResults）{
var closest = [];
document.getElementById（'info'）。innerHTML + =processing+ gmarkers.length +< br>;
for（var i = 0; i
document.getElementById（'info'）。innerHTML + =process+ i +：+ gmarkers [i] .getPosition（）。toUrlValue（6）+：+ gmarkers [i] .distance .toFixed（2）+< br>;
gmarkers [i] .setMap（null）;
closest.push（gmarkers [i]）;
closest.sort（sortByDist）;
}
返回最近;
函数sortByDist（a，b）{
return（a.distance - b.distance）
}
函数calculateDistances（pt，closest，numberOfResults）{
var service = new google.maps.DistanceMatrixService（）;
var request = {
origins：[pt]，
destinations：[]，
travelMode：google.maps.TravelMode.DRIVING，
unitSystem：google.maps .UnitSystem.IMPERIAL，
avoidHighways：false，
avoidTolls：false
};
for（var i = 0; i< closest.length; i ++）{
request.destinations.push（closest [i] .getPosition（））;
service.getDistanceMatrix（request，function（response，status）{
if（status！= google.maps.DistanceMatrixStatus.OK）{
alert（'Error was： '+ status'）;
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById（'side_bar'）;
outputDiv.innerHTML ='';
var results = response.rows [0] .elements;
//将标题和地址保存在记录中以便分类
for （var i = 0; i< closest.length; i ++）{
results [i] .title = closest [i] .title;
results [i] .address = closest [i]。 address;
results [i] .idx_closestMark = i;
}
results.sort（sortByDistDM）;
for（var i = 0;
（（i< ; numberOfResults）&&（< closest.length））; i ++）{
nearest [i] .setMap（map）;
outputDiv.innerHTML + =<一小时ef ='javascript：google.maps.event.trigger（closest [+ results [i] .idx_closestMark +]，\click \）;'>+ results [i] .title +'< ; / a>< br>'+ results [i] .address +< br>+ results [i] .distance.text +'about'+ results [i] .duration.text +< br> ;< a href ='javascript：getDirections（customerMarker.getPosition（），& quot;+ results [i] .address +& quot;）;'>获取路线< / a>< br> < hr>
}
}
}）;
}
函数getDirections（origin，destination）{
var request = {
origin：origin，
destination：destination，
travelMode ：google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route（request，function（response，status）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setMap（map）;
directionsDisplay.setDirections（response）;
$（＃side_bar）。css（{
z-index：-100，
top：135px
}）;
$（＃panel）。css（z-index，100）;
$（＃mdiv）.css（display，block）;
directionsDisplay.setPanel（document.getElementById（'panel'））;
}）;
}
函数sortByDistDM（a，b）{
return（a.distance.value - b.distance.value）
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / body>
< / html>
解决方案
side_bar条目不是表格，所以CSS您添加了< tr> 元素不适用。
function calculateDistances（pt，closest，numberOfResults）{
var service = new google.maps.DistanceMatrixService（）;
var request = {
origins：[pt]，
destinations：[]，
travelMode：google.maps.TravelMode.DRIVING，
unitSystem：google.maps .UnitSystem.IMPERIAL，
avoidHighways：false，
avoidTolls：false
};
for（var i = 0; i< closest.length; i ++）{
request.destinations.push（closest [i] .getPosition（））;
service.getDistanceMatrix（request，function（response，status）{
if（status！= google.maps.DistanceMatrixStatus.OK）{
alert（'Error was： '+ status'）;
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById（'side_bar'）;
var sidebarHtml ='< table>';
var results = response.rows [0] .elements;
//保存标题和地址$ b for（var i = 0; i< closest.length; i ++）{
results [i] .title = closest [i] .title;
results [i] .address = closest [ （var i = 0;
）;
results [i] .idx_closestMark = i;
}
results.sort（sortByDistDM）;
（i< numberOfResults）&&&（i< closest.length））; i ++）{
nearest [i] .setMap（map）;
sidebarHtml + =< ; TR& gt;< td>< a href ='javascript：google.maps.event.trigger（closest [+ results [i] .idx_closestMark +]，\click \）;'>+ results [i] .title +'< / a>< br>'+ results [i] .address +< br>+ results [i] .distance.text +'about'+ results [i] .duration.text +< br>< a href ='javascript：getDirections（customerMarker.getPosition（），& quot;+ results [i] .address +& quot;）;'>获取路线< / a>< / td>< / tr>
}
sidebarHtml + ='< / table>';
outputDiv.innerHTML = sidebarHtml;
}
}）;
}
代码段：
var geocoder = null; var map = null; var customerMarker = null; var gmarkers = []; var closest = []; var directionsDisplay = new google.maps.DirectionsRenderer（） ;; var directionsService = new google.maps.DirectionsService（）; var map; function initialize（）{// alert（init）; geocoder = new google.maps.Geocoder（）; map = new google.maps.Map（document.getElementById（'map'），{zoom：9，center：new google.maps.LatLng（52.6699927，-0.7274620），mapTypeId：google.maps.MapTypeId.ROADMAP}）; var infowindow = new google.maps.InfoWindow（）; var marker，i; var bounds = new google.maps.LatLngBounds（）; document.getElementById（'info'）。innerHTML =found+ locations.length +locations< br>; for（i = 0; i< locations.length; i ++）{var coordStr = locations [i] [2]; var coords = coordStr.split（，）; var pt = new google.maps.LatLng（parseFloat（coords [0]），parseFloat（coords [1]））; bounds.extend（PT）; marker = new google.maps.Marker（{position：pt，map：map，icon：locations [i] [3]，address：locations [i] [1]，title：locations [i] [0]，html：位置[i] [0] +< br>+ locations [i] [1] +< br>< br>< a href ='javascript：getDirections（customerMarker.getPosition（） + locations [i] [1] +& quot;）;'>获取路线< / a>}）; gmarkers.push（标记）; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{infowindow.setContent（marker.html）; infowindow.open（map，marker）;}}）（marker ， 一世））; } map.fitBounds（bounds）; $（＃mdiv）。click（function（）{$（＃side_bar）。css（{z-index：100，top：135px}）; $（＃panel） .css（z-index，-100）; $（＃mdiv）。css（display，none）;}）} function codeAddress（）{var address = document.getElementById（'address' ）。值; geocoder.geocode（{'address'：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{map.setCenter（results [0] .geometry.location）; if（customerMarker ）customerMarker.setMap（null）; customerMarker = new google.maps.Marker（{map：map，position：results [0] .geometry.location}）; nearest = findClosestN（results [0] .geometry.location，12） ; //获取驾驶距离nearest = nearest.splice（0，12）; calculateDistances（results [0] .geometry.location，nearest，12）;} else {alert（'Geocode由于以下原因不成功：'+状态）;}}）;}函数findClosestN（pt，numberOfResults）{var closest = []; document.getElementById（'info'）。innerHTML + =processing+ gmarkers.length +< br>; for（var i = 0; i ，#map {margin：0;} 填充：0; height：600px;宽度：400px; } .text {width：300px; height：600px;背景颜色：白色;溢出：滚动;溢出-y：auto; overflow-x：hidden; } #side_bar {z-index：100;位置：绝对;顶部：135px; left：400px; } #panel {z-index：-100;显示：块;位置：绝对;顶部：135px; left：400px; } #mdiv {z-index：500;宽度：25px;身高：25px;显示：无;背景颜色：红色;边框：1px纯黑色;位置：绝对;左：660px;顶部：112px; } .mdiv {height：25px; width：2px; margin-left：12px;背景颜色：黑色;转换：旋转（45度）; -ms-transform：rotate（45deg）; / * IE 9 * / -webkit-transform：rotate（45deg）; / * Safari和Chrome * / z-index：1; } .md {height：25px; width：2px;背景颜色：黑色;转换：旋转（90deg）; -ms-transform：rotate（90deg）; / * IE 9 * / -webkit-transform：rotate（90deg）; / * Safari和Chrome * / z-index：2; } tr：nth-child（even）{background：#CCC} tr：nth-child（odd）{background：#FFF}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> ;< / script>< script src =https://maps.googleapis.com/maps/api/js?libraries=geometry>< / script>< div class =bh-sl-container > < div id =page-header> < h1 class =bh-sl-title>审核员定位器< / h1> < / DIV> < div class =bh-sl-form-container> < form id =bh-sl-user-locationmethod =postaction =＃> < div class =form-input> < label for =bh-sl-address>输入地址或邮编：< / label> < input id =addresstype =textvalue =Paramus，NJ/> < input type =buttonvalue =Submitonclick =codeAddress（）; /> < / DIV> < /形式> < / DIV> < table border =0style =height：100％> < tr style =height：100％> < td style =height：100％> < div id =map>< / div> < / TD> < TD> < div id =side_barclass ='text'>< / div> < div id =panelclass ='text'>< / div> < / TD> < / TR> < /表> < div id =info>< / div> < div id =mdiv> < div class =mdiv> < div class =md> < / DIV> < / DIV> < / div>
I have 2 sidebars. One sidebar gives sorted results from a mysql query and the other sidebar gives directions to and from a location. I am trying to alternate the row colors of the mysql results and the row colors of the directions. It's working for the directions using this code but not for the mysql results. Anyone know how I can get this working? Thanks
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
<!DOCTYPE html>
<html>
<head>
<style>
html,
body,
#map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
table,
tr,
td {
height: 100%;
}
.text {
width: 300px;
height: 600px;
background-color: white;
overflow:scroll;
overflow-y: auto;
overflow-x: hidden;
}
#side_bar {
z-index: 100;
position: absolute;
top: 135px;
left: 1050px;
}
#panel {
z-index: -100;
display: block;
position: absolute;
top: 135px;
left: 1050px;
}
#mdiv {
z-index: 500;
width: 25px;
height: 25px;
display: none;
background-color: red;
border: 1px solid black;
position: absolute;
left: 1300px;
top: 112px;
}
.mdiv {
height: 25px;
width: 2px;
margin-left: 12px;
background-color: black;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1;
}
.md {
height: 25px;
width: 2px;
background-color: black;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 2;
}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
</style>
</head>
<link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" />
<body>
<div class="bh-sl-container">
<div id="page-header">
<h1 class="bh-sl-title">The Auditor Locator</h1>
</div>
<div class="bh-sl-form-container">
<form id="bh-sl-user-location" method="post" action="#">
<div class="form-input">
<label for="bh-sl-address">Enter Address or Zip Code:</label>
<input id= "address" type="text" value="Palo Alto, CA"></input>
<input type= "button" value="Submit" onclick="codeAddress();"></input>
</div>
</form>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0">
<tr>
<td>
<div id="map" style="height: 600px; width:1000px;"></div>
</td>
<td>
<div id="side_bar" class='text'></div>
<div id="panel" class='text'></div>
</td>
</tr>
</table>
<div id="info"></div>
<div id="mdiv">
<div class="mdiv">
<div class="md">
</div>
</div>
</div>
<script type="text/javascript">
var locations = [
<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, address, lat, lng, Icon FROM markers";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '["' . $row["name"]. '"'. ', '. '"' . $row["address"].'"'.', '. '"'. $row["lat"].','. $row["lng"].'"'.', '. '"'. $row["Icon"]. '"]'. ',';
}
} else {
echo "0 results";
}
$conn->close();
?>
];
// alert(locations.length);
var geocoder = null;
var map = null;
var customerMarker = null;
var gmarkers = [];
var closest = [];
var directionsDisplay = new google.maps.DirectionsRenderer();;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
// alert("init");
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(52.6699927, -0.7274620),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
document.getElementById('info').innerHTML = "found " + locations.length + " locations<br>";
for (i = 0; i < locations.length; i++) {
var coordStr = locations[i][2];
var coords = coordStr.split(",");
var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
bounds.extend(pt);
marker = new google.maps.Marker({
position: pt,
map: map,
icon: locations[i][3],
address: locations[i][1],
title: locations[i][0],
html: locations[i][0] + "<br>" + locations[i][1] + "<br><br><a href='javascript:getDirections(customerMarker.getPosition(),"" + locations[i][1] + "");'>Get Directions</a>"
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marker.html);
infowindow.open(map, marker);
}
})
(marker, i));
}
map.fitBounds(bounds);
$("#mdiv").click(function() {
$("#side_bar").css({
"z-index": 100,
"top": "135px"
});
$("#panel").css("z-index", -100);
$("#mdiv").css("display", "none");
})
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if (customerMarker) customerMarker.setMap(null);
customerMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
closest = findClosestN(results[0].geometry.location, 12);
// get driving distance
closest = closest.splice(0, 12);
calculateDistances(results[0].geometry.location, closest, 12);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function findClosestN(pt, numberOfResults) {
var closest = [];
document.getElementById('info').innerHTML += "processing " + gmarkers.length + "<br>";
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt, gmarkers[i].getPosition());
document.getElementById('info').innerHTML += "process " + i + ":" + gmarkers[i].getPosition().toUrlValue(6) + ":" + gmarkers[i].distance.toFixed(2) + "<br>";
gmarkers[i].setMap(null);
closest.push(gmarkers[i]);
closest.sort(sortByDist);
}
return closest;
}
function sortByDist(a, b) {
return (a.distance - b.distance)
}
function calculateDistances(pt, closest, numberOfResults) {
var service = new google.maps.DistanceMatrixService();
var request = {
origins: [pt],
destinations: [],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
};
for (var i = 0; i < closest.length; i++) {
request.destinations.push(closest[i].getPosition());
}
service.getDistanceMatrix(request, function(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('side_bar');
outputDiv.innerHTML = '';
var results = response.rows[0].elements;
// save title and address in record for sorting
for (var i = 0; i < closest.length; i++) {
results[i].title = closest[i].title;
results[i].address = closest[i].address;
results[i].idx_closestMark = i;
}
results.sort(sortByDistDM);
for (var i = 0;
((i < numberOfResults) && (i < closest.length)); i++) {
closest[i].setMap(map);
outputDiv.innerHTML += "<a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],\"click\");'>" + results[i].title + '</a><br>' + results[i].address + "<br>" + results[i].distance.text + ' approximately ' + results[i].duration.text + "<br><a href='javascript:getDirections(customerMarker.getPosition(),"" + results[i].address + "");'>Get Directions</a><br><hr>"
}
}
});
}
function getDirections(origin, destination) {
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
$("#side_bar").css({
"z-index": -100,
"top": "135px"
});
$("#panel").css("z-index", 100);
$("#mdiv").css("display", "block");
directionsDisplay.setPanel(document.getElementById('panel'));
}
});
}
function sortByDistDM(a, b) {
return (a.distance.value - b.distance.value)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
解决方案
The side_bar entries are not a table, so the CSS you added for <tr> elements doesn't apply. Probably the simplest thing to do is make them a table.
function calculateDistances(pt, closest, numberOfResults) {
var service = new google.maps.DistanceMatrixService();
var request = {
origins: [pt],
destinations: [],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
};
for (var i = 0; i < closest.length; i++) {
request.destinations.push(closest[i].getPosition());
}
service.getDistanceMatrix(request, function(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('side_bar');
var sidebarHtml = '<table>';
var results = response.rows[0].elements;
// save title and address in record for sorting
for (var i = 0; i < closest.length; i++) {
results[i].title = closest[i].title;
results[i].address = closest[i].address;
results[i].idx_closestMark = i;
}
results.sort(sortByDistDM);
for (var i = 0;
((i < numberOfResults) && (i < closest.length)); i++) {
closest[i].setMap(map);
sidebarHtml += "<tr><td><a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],\"click\");'>" + results[i].title + '</a><br>' + results[i].address + "<br>" + results[i].distance.text + ' approximately ' + results[i].duration.text + "<br><a href='javascript:getDirections(customerMarker.getPosition(),"" + results[i].address + "");'>Get Directions</a></td></tr>"
}
sidebarHtml += '</table>';
outputDiv.innerHTML = sidebarHtml;
}
});
}
code snippet:
var geocoder = null;
var map = null;
var customerMarker = null;
var gmarkers = [];
var closest = [];
var directionsDisplay = new google.maps.DirectionsRenderer();;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
// alert("init");
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(52.6699927, -0.7274620),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
document.getElementById('info').innerHTML = "found " + locations.length + " locations<br>";
for (i = 0; i < locations.length; i++) {
var coordStr = locations[i][2];
var coords = coordStr.split(",");
var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
bounds.extend(pt);
marker = new google.maps.Marker({
position: pt,
map: map,
icon: locations[i][3],
address: locations[i][1],
title: locations[i][0],
html: locations[i][0] + "<br>" + locations[i][1] + "<br><br><a href='javascript:getDirections(customerMarker.getPosition(),"" + locations[i][1] + "");'>Get Directions</a>"
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marker.html);
infowindow.open(map, marker);
}
})
(marker, i));
}
map.fitBounds(bounds);
$("#mdiv").click(function() {
$("#side_bar").css({
"z-index": 100,
"top": "135px"
});
$("#panel").css("z-index", -100);
$("#mdiv").css("display", "none");
})
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if (customerMarker) customerMarker.setMap(null);
customerMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
closest = findClosestN(results[0].geometry.location, 12);
// get driving distance
closest = closest.splice(0, 12);
calculateDistances(results[0].geometry.location, closest, 12);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function findClosestN(pt, numberOfResults) {
var closest = [];
document.getElementById('info').innerHTML += "processing " + gmarkers.length + "<br>";
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt, gmarkers[i].getPosition());
document.getElementById('info').innerHTML += "process " + i + ":" + gmarkers[i].getPosition().toUrlValue(6) + ":" + gmarkers[i].distance.toFixed(2) + "<br>";
gmarkers[i].setMap(null);
closest.push(gmarkers[i]);
closest.sort(sortByDist);
}
return closest;
}
function sortByDist(a, b) {
return (a.distance - b.distance)
}
function calculateDistances(pt, closest, numberOfResults) {
var service = new google.maps.DistanceMatrixService();
var request = {
origins: [pt],
destinations: [],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
};
for (var i = 0; i < closest.length; i++) {
request.destinations.push(closest[i].getPosition());
}
service.getDistanceMatrix(request, function(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('side_bar');
var sidebarHtml = '<table>';
var results = response.rows[0].elements;
// save title and address in record for sorting
for (var i = 0; i < closest.length; i++) {
results[i].title = closest[i].title;
results[i].address = closest[i].address;
results[i].idx_closestMark = i;
}
results.sort(sortByDistDM);
for (var i = 0;
((i < numberOfResults) && (i < closest.length)); i++) {
closest[i].setMap(map);
sidebarHtml += "<tr><td><a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],\"click\");'>" + results[i].title + '</a><br>' + results[i].address + "<br>" + results[i].distance.text + ' approximately ' + results[i].duration.text + "<br><a href='javascript:getDirections(customerMarker.getPosition(),"" + results[i].address + "");'>Get Directions</a></td></tr>"
}
sidebarHtml += '</table>';
outputDiv.innerHTML = sidebarHtml;
}
});
}
function getDirections(origin, destination) {
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
$("#side_bar").css({
"z-index": -100,
"top": "135px"
});
$("#panel").css("z-index", 100);
$("#mdiv").css("display", "block");
directionsDisplay.setPanel(document.getElementById('panel'));
}
});
}
function sortByDistDM(a, b) {
return (a.distance.value - b.distance.value)
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
["John Doe", "145 Rock Ridge Road, Chester, NY ", "41.314926,-74.270134", "http://maps.google.com/mapfiles/ms/icons/blue.png"],
["Jim Smith", "12 Williams Rd, Montvale, NJ ", "41.041599,-74.019554", "http://maps.google.com/mapfiles/ms/icons/green.png"],
["John Jones", "689 Fern St Township of Washington, NJ ", "40.997704,-74.050598", "http://maps.google.com/mapfiles/ms/icons/yellow.png"],
];
html,
body,
#map {
margin: 0;
padding: 0;
height: 600px;
width: 400px;
}
.text {
width: 300px;
height: 600px;
background-color: white;
overflow: scroll;
overflow-y: auto;
overflow-x: hidden;
}
#side_bar {
z-index: 100;
position: absolute;
top: 135px;
left: 400px;
}
#panel {
z-index: -100;
display: block;
position: absolute;
top: 135px;
left: 400px;
}
#mdiv {
z-index: 500;
width: 25px;
height: 25px;
display: none;
background-color: red;
border: 1px solid black;
position: absolute;
left: 660px;
top: 112px;
}
.mdiv {
height: 25px;
width: 2px;
margin-left: 12px;
background-color: black;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1;
}
.md {
height: 25px;
width: 2px;
background-color: black;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 2;
}
tr:nth-child(even) {
background: #CCC
}
tr:nth-child(odd) {
background: #FFF
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div class="bh-sl-container">
<div id="page-header">
<h1 class="bh-sl-title">The Auditor Locator</h1>
</div>
<div class="bh-sl-form-container">
<form id="bh-sl-user-location" method="post" action="#">
<div class="form-input">
<label for="bh-sl-address">Enter Address or Zip Code:</label>
<input id="address" type="text" value="Paramus, NJ" />
<input type="button" value="Submit" onclick="codeAddress();" />
</div>
</form>
</div>
<table border="0" style="height:100%">
<tr style="height:100%">
<td style="height:100%">
<div id="map"></div>
</td>
<td>
<div id="side_bar" class='text'></div>
<div id="panel" class='text'></div>
</td>
</tr>
</table>
<div id="info"></div>
<div id="mdiv">
<div class="mdiv">
<div class="md">
</div>
</div>
</div>
这篇关于交替颜色行 - 不适用于两个侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
