当我在网站上嵌入谷歌地图时，我遇到了插件破坏的问题。我已经制作了没有googlemaps代码的页面副本，并且该插件有效 - 我无法弄清楚为什么当我添加代码时它会破坏插件。
预期行为： Clicking the respective fields will show a pop up where you can choose a date or time
经验丰富的行为： Clicking the field yields no pop up
正在打破的插件（位于两个示例的底部附近）：
<script>
$('#basicExample .time').timepicker({
'showDuration': true,
'timeFormat': 'H:i:s',
'step': 60
});
$('#basicExample .date').datepicker({
'format': 'dd/mm/yyyy',
'autoclose': true
});
var basicExampleEl = document.getElementById('basicExample');
var datepair = new Datepair(basicExampleEl);
</script>
之前的代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Historical Data - CrowdTracker</title>
<link href="CSS.css" rel="stylesheet" type="text/css">
<title>Datepair.js – Demos and Documentation</title>
<meta name="description" content="A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar." />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" />
<script src="lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />
<script src="lib/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="lib/pikaday.css" />
<script src="lib/jquery.ptTimeSelect.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.ptTimeSelect.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="lib/moment.min.js"></script>
<script src="lib/site.js"></script>
<link rel="stylesheet" type="text/css" href="lib/site.css" />
<script src="dist/datepair.js"></script>
<script src="dist/jquery.datepair.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
alert("API Loaded");
var ConData = new Array();
var colour = [];
var stroke = [];
var lightgreen = '#D8FE6D'
var darkgreen = '#8AE62E';
var yellow = '#FFFF00';
var orange = '#FFAD33';
var darkorange = '#CF7C00';
var red = '#ff3333';
var darkred = '#990000';
var line_light_green = '#97B24C';
var line_dark_green = '#61A120';
var line_yellow = '#B2B200';
var line_orange = '#CC8A29';
var line_darkorange = '#A16100';
var line_red = '#B22424';
var line_darkred = '#6B0000';
var lime = '#00FF00';
var teal = '#00FFCC';
var blue = '#0000FF';
var purple = '#6600FF';
var fuchsia = '#CC66FF';
var myheart = '#000000';
function loadData()
{
var dateFrom = document.getElementById("dateFrom").value;
var dateTo = document.getElementById("dateTo").value;
var timeFrom = document.getElementById("timeFrom").value;
var timeTo = document.getElementById("timeTo").value;
temp = [dateFrom, timeFrom];
datetimeFrom = temp.join(" ");
temp = [dateTo, timeTo];
datetimeTo = temp.join(" ");
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","getHistoryData.php?q="+datetimeFrom+"&p="+datetimeTo+"&s="+dateTo,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
temp = xmlhttp.responseText; //This returns the <doctype HTML> crap
test = temp.split(">"); //Splitting the string into an array so that the number is the first in the 3rd array
alert(temp);
for (x = 0; x <= 2; x++)
{
test.shift();
test.pop();
}
for (s = 0; s <46; s++)
{
ConData[s] = test[s];
}
/*
function AlertValues(){
alert(ConData[1]);
alert(ConData[2]);
alert(ConData[3]);
alert(ConData[45]);
}
AlertValues(ConData);
*/
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
for(i = 0; i < 46; i++)
{
if (test[i] > 0 && test[i] <= 100)
{
colour[i] = lightgreen;
stroke[i] = line_light_green;
}
else if (test[i] > 100 && test[i] <= 250)
{
colour[i] = darkgreen;
stroke[i] = line_dark_green;
}
else if (test[i] > 250 && test[i] <= 500)
{
colour[i] = yellow;
stroke[i] = line_yellow;
}
else if (test[i] > 500 && test[i] <= 750)
{
colour[i] = orange;
stroke[i] = line_orange;
}
else if (test[i] > 750 && test[i] <= 1250)
{
colour[i] = darkorange;
stroke[i] = line_darkorange;
}
else if (test[i] > 1250 && test[i] <= 2000)
{
colour[i] = red;
stroke[i] = line_red;
}
else if (test[i] > 2000)
{
colour[i] = darkred;
stroke[i] = line_darkred;
}
else
{
colour[i] = myheart;
stroke[i] = line_red;
}
}
}
return ConData;
}
return ConData
}
/*----------------------------------------------------------------------------------------*/
setTimeout(function() { drawChart(ConData); }, 30000);
function drawChart(){
var Buildings = ['B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08', 'B09', 'B10',
'B11', 'B12', 'B13', 'B14', 'B15', 'B16', 'B17', 'B18', 'B19', 'B20',
'B21', 'B22', 'B23', 'B24', 'B25', 'B27', 'B28', 'B30', 'B31', 'B31b',
'B32', 'B35', 'B36', 'B37', 'B38', 'B39', 'B40', 'B41', 'B42', 'B43',
'B45', 'B63', 'B67', 'B68'];
for (p = 0; p < 46; p++)
{
ConData[p] = parseInt(ConData[p], 10);
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Building');
data.addColumn('number', 'Users');
for (f = 0; f < 46; f++)
{
data.addRows([
[Buildings[f], ConData[f]]
]);
}
// Set chart options
var options = {'title':'Dispersion of students across campus',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div>
</div>
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="LiveMaps.html">Live Maps</a></li>
<li><a href="HistoricalData.html">Historical Data</a></li>
<li><a href="Support.html">Support</a></li>
</ul>
</div>
<section id="Titlebar"><a href="index.html"><img src="Images/Title.png" width="300" height="100" alt=""/></a></section>
<section id="headergradient">
<img src="Images/Grid.png" width="350" height="100" alt=""/>
<h1>Live congestion heat mapping and time data</h1>
</section>
<div id="wrapper">
<main id="HistoricalData">
<!-- HISTORICAL DATA STARTS HERE -->
HISTORICAL DATA (SQL QUERIES VIA DROP DOWNS THAT PROVIDE DISPLAY DATA AND GRAPH API)
<!-- HISTORICAL DATA ENDS HERE -->
</main>
<p id="basicExample">
<input type="text" class="date start" id="dateFrom"/>
<input type="text" class="time start" id="timeFrom"/> to
<input type="text" class="time end" id="timeTo"/>
<input type="text" class="date end" id="dateTo"/>
<button onclick="loadData()"> Go </button>
</p>
<script>
$('#basicExample .time').timepicker({
'showDuration': true,
'timeFormat': 'H:i:s',
'step': 60
});
$('#basicExample .date').datepicker({
'format': 'dd/mm/yyyy',
'autoclose': true
});
var basicExampleEl = document.getElementById('basicExample');
var datepair = new Datepair(basicExampleEl);
</script>
</div>
<div id="chart_div" style="width:800; height:600"></div>
<footer id="DiversIT">
<p id="DesignedBy">Designed by <a href="http://www.diversit.co" target="_blank">DiversIT</a></p>
<p id="sitemap"><a href="SiteMap.html">Site Map</a></p>
</footer>
</body>
</html>
之后：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Historical Data - CrowdTracker</title>
<link href="CSS.css" rel="stylesheet" type="text/css">
<style>
#map
{
width: 800px;
height: 200px;
}
.info
{
width: 400px;
height: 210px;
}
</style>
<title>Datepair.js – Demos and Documentation</title>
<meta name="description" content="A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar." />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" />
<script src="lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />
<script src="lib/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="lib/pikaday.css" />
<script src="lib/jquery.ptTimeSelect.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.ptTimeSelect.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="lib/moment.min.js"></script>
<script src="lib/site.js"></script>
<link rel="stylesheet" type="text/css" href="lib/site.css" />
<script src="dist/datepair.js"></script>
<script src="dist/jquery.datepair.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5_KBtY0Pbm4aaRVk5-H0R3jZ2lfBhQNU"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart_12);
function drawChart_12() {
var data_12 = google.visualization.arrayToDataTable([
['Time', 'Users'],
/*['9PM', 51],
['10PM', 32],
['11PM', 11],*/
['12AM', 2],
['1AM', 2],
['2AM', 2],
['3AM', 2],
['4AM', 3],
['5AM', 7],
['6AM', 18],
['7AM', 45],
['8AM', 50],
['9AM', 62],
['10AM', 87],
['11AM', 123],
['12PM', 135],
['1PM', 110],
['2PM', 104]/*,
['3PM', 101],
['4PM', 84],
['5PM', 64],
['6PM', 81],
['7PM', 72],
['8PM', 55],
['9PM', 42]*/
]);
var options_12 = {
title: 'Unibar (Building 12) - No. of users in past day',
curveType: 'function',
legend: { position: 'none' },
pointSize: 5,
hAxis: {slantedText:true, slantedTextAngle:45}
};
b12_div = document.createElement('div');
b12_div.className = "info";
b12_div.id = "b12_div";
infoWindow_12 = new google.maps.InfoWindow();
var chart_12 = new google.visualization.LineChart(b12_div);
chart_12.draw(data_12, options_12);
infoWindow_12.setContent(b12_div);
}
</script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
//google.load('visualization', '1.0', {'packages':['corechart']});
//alert("API Loaded");
//var ConData = new Array();
var colour = [];
var stroke = [];
var lightgreen = '#D8FE6D'; // i > 0 && i <= 100
var darkgreen = '#8AE62E'; // i > 100 && i <= 250
var yellow = '#FFFF00'; // i > 250 && i <= 500
var peach = '#FFCC99'; // i > 500 && i <= 750
var orange = '#FFAD33'; // i > 750 && i <= 1250
var darkorange = '#CF7C00'; // i > 1250 && i <= 2000
var vDarkOrange = '#744600'; // i > 2000 && i <= 3000
var red = '#ff3333'; // i > 3000 && i <= 4000
var darkred = '#990000'; // i > 4000
var line_light_green = '#97B24C';
var line_dark_green = '#61A120';
var line_yellow = '#B2B200';
var line_peach = '#B8936E';
var line_orange = '#CC8A29';
var line_darkorange = '#A16100';
var line_vdarkorange = '#513100';
var line_red = '#B22424';
var line_darkred = '#6B0000';
var lime = '#00FF00';
var teal = '#00FFCC';
var blue = '#0000FF';
var purple = '#6600FF';
var fuchsia = '#CC66FF';
var myheart = '#000000';
function loadData()
{
var dateFrom = document.getElementById("dateFrom").value;
var dateTo = document.getElementById("dateTo").value;
var timeFrom = document.getElementById("timeFrom").value;
var timeTo = document.getElementById("timeTo").value;
temp = [dateFrom, timeFrom];
datetimeFrom = temp.join(" ");
temp = [dateTo, timeTo];
datetimeTo = temp.join(" ");
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","getHistoryData.php?q="+datetimeFrom+"&p="+datetimeTo+"&s="+dateTo,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
temp = xmlhttp.responseText; //This returns the <doctype HTML> crap
test = temp.split(">"); //Splitting the string into an array so that the number is the first in the 3rd array
alert(temp);
for (x = 0; x <= 2; x++)
{
test.shift();
test.pop();
}
for (s = 0; s <46; s++)
{
ConData[s] = test[s];
}
/*
function AlertValues(){
alert(ConData[1]);
alert(ConData[2]);
alert(ConData[3]);
alert(ConData[45]);
}
AlertValues(ConData);
*/
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
for(i = 3; i <= 45; i++)
{
if (test[i] > 0 && test[i] <= 100)
{
colour[i] = lightgreen;
stroke[i] = line_light_green;
}
else if (test[i] > 100 && test[i] <= 250)
{
colour[i] = darkgreen;
stroke[i] = line_dark_green;
}
else if (test[i] > 250 && test[i] <= 500)
{
colour[i] = yellow;
stroke[i] = line_yellow;
}
else if (test[i] > 500 && test[i] <= 750)
{
colour[i] = peach;
stroke[i] = line_peach;
}
else if (test[i] > 750 && test[i] <= 1250)
{
colour[i] = orange;
stroke[i] = line_orange;
}
else if (test[i] > 1250 && test[i] <= 2000)
{
colour[i] = darkorange;
stroke[i] = line_darkorange;
}
else if (test[i] > 2000 && test[i] <= 3000)
{
colour[i] = vDarkOrange;
stroke[i] = line_vdarkorange;
}
else if (test[i] > 3000 && test[i] <= 4000)
{
colour[i] = red;
stroke[i] = line_red;
}
else if (test[i] > 4000)
{
colour[i] = darkred;
stroke[i] = line_darkred;
}
else
{
colour[i] = myheart;
stroke[i] = line_red;
}
}
initMap();
}
//return ConData;
}
//return ConData
}
</script>
</head>
<body onload="initMap(); colourPickArray()">
<div>
</div>
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="LiveMaps.html">Live Maps</a></li>
<li><a href="HistoricalData.html">Historical Data</a></li>
<li><a href="Support.html">Support</a></li>
</ul>
</div>
<section id="Titlebar"><a href="index.html"><img src="Images/Title.png" width="300" height="100" alt=""/></a></section>
<section id="headergradient">
<img src="Images/Grid.png" width="350" height="100" alt=""/>
<h1>Live congestion heat mapping and time data</h1>
</section>
<div id="wrapper">
<main id="HistoricalData">
<!-- HISTORICAL DATA STARTS HERE -->
HISTORICAL DATA (SQL QUERIES VIA DROP DOWNS THAT PROVIDE DISPLAY DATA AND GRAPH API)
<!-- LIVE MAPS STARTS HERE -->
<div align="center" id="map"></div>
<script>
// Creates a map centered on UOW at specific zoom level.
function initMap() {
var mapStyles =[
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map = new google.maps.Map(document.getElementById('map'), {
minZoom: 16,
maxZoom: 20,
zoom: 17,
center: {lat: -34.4051998,lng: 150.8785557},
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
styles: mapStyles
});
var strictBounds = new google.maps.LatLngBounds(
// Southwest corner
new google.maps.LatLng(-34.407490, 150.871661),
// Northeast corner
new google.maps.LatLng(-34.402622, 150.884642)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
var infoWindow = new google.maps.InfoWindow();
// Building 1 (Materials Engineering)
var b1_coord = [
new google.maps.LatLng(-34.406586,150.880995),
new google.maps.LatLng(-34.406602,150.881127),
new google.maps.LatLng(-34.407050,150.881050),
new google.maps.LatLng(-34.407094,150.881411),
new google.maps.LatLng(-34.407239,150.881385),
new google.maps.LatLng(-34.407223,150.881221),
new google.maps.LatLng(-34.407294,150.881208),
new google.maps.LatLng(-34.407222,150.880619),
new google.maps.LatLng(-34.406897,150.880676),
new google.maps.LatLng(-34.406922,150.880900),
new google.maps.LatLng(-34.406845,150.880912),
new google.maps.LatLng(-34.406850,150.880948)
];
var b1_poly = new google.maps.Polygon({
content: "Building 1",
path: b1_coord,
strokeColor: stroke[3],
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: colour[3],
fillOpacity: 0.5
});
b1_poly.setMap(map);
b1_poly.addListener('click', function(event) {
var contentString = this.content;
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});
}
</script>
<!-- HISTORICAL DATA ENDS HERE -->
</main>
<p id="basicExample">
<input type="text" class="date start" id="dateFrom"/>
<input type="text" class="time start" id="timeFrom"/> to
<input type="text" class="time end" id="timeTo"/>
<input type="text" class="date end" id="dateTo"/>
<button onclick="loadData()"> Go </button>
</p>
<script>
$('#basicExample .time').timepicker({
'showDuration': true,
'timeFormat': 'H:i:s',
'step': 60
});
$('#basicExample .date').datepicker({
'format': 'dd/mm/yyyy',
'autoclose': true
});
var basicExampleEl = document.getElementById('basicExample');
var datepair = new Datepair(basicExampleEl);
</script>
</div>
<div id="chart_div" style="width:800; height:600"></div>
<footer id="DiversIT">
<p id="DesignedBy">Designed by <a href="http://www.diversit.co" target="_blank">DiversIT</a></p>
<p id="sitemap"><a href="SiteMap.html">Site Map</a></p>
</footer>
</body>
</html>
唯一值得注意的区别是顶部的一些脚本源和保存initMap（）函数的脚本标记。我很困惑为什么会这样。
非常感谢！
答案 0 :(得分：0)
解决了我的问题，我将相关的脚本移出了头部并将它们放在我遇到问题的代码之上。
<meta name="description" content="A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar." />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" />
<script src="lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />
<script src="lib/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="lib/pikaday.css" />
<script src="lib/jquery.ptTimeSelect.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.ptTimeSelect.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="lib/moment.min.js"></script>
<script src="lib/site.js"></script>
<link rel="stylesheet" type="text/css" href="lib/site.css" />
<script src="dist/datepair.js"></script>
<script src="dist/jquery.datepair.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
$('#basicExample .time').timepicker({
'showDuration': true,
'timeFormat': 'H:i:s',
'step': 60
});
$('#basicExample .date').datepicker({
'format': 'dd/mm/yyyy',
'autoclose': true
});
var basicExampleEl = document.getElementById('basicExample');
var datepair = new Datepair(basicExampleEl);
</script>