我已经在不同的文件中实现了仪表板的部分功能，现在我正在尝试将它们合并在一起。我的仪表板从地理编码字段获取地址，并从网站检索url json数据。然后，数据在地图上，数据表上和散点图上可视化。现在我正在尝试将谷歌地图与数据表合并，但是我花了几个小时才收到以下错误：Uncaught TypeError: Object #<Object> has no method 'load'
我正在尝试更改库的加载顺序，但我没有看到任何结果。这是我的代码的一部分。如果您需要更多代码，我很乐意提供。它只是工具和复杂的一次提供它。
使用Javascript：
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <!-- jQuery CDN -->
<script type="text/javascript">
google.load('visualization', '1', {'packages':['table']});
google.setOnLoadCallBack(drawTable);
var geocoder;
var map;
var latlng;
var markers = [];
var myPositionMarker = null;;
//Initializing the map
function initialize() {
var lat = 52.629729;
var lng = -1.131592;
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
getCrimeByLocation(lat, lng);
}
function fitBoundsMap(){
//Zoom and center the map to fit the markers
//This logic could be conbined with the marker creation.
//Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(data.position);
}
map.fitBounds(bounds);
}
function addMyPositionMarker(lat, lng) {
if(myPositionMarker != null){
myPositionMarker.setMap(null); // clearing prev req position
}
myPositionMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
draggable: true,
zIndex: 99999,
icon: 'http://i.stack.imgur.com/orZ4x.png'
});
google.maps.event.addListener(myPositionMarker,'dragend',function(event) {
getCrimeByLocation(event.latLng.lat(), event.latLng.lng());
});
}
//Calling the JSON data from the website.
function getCrimeByLocation(lat, lng, date){
if(date == null){
var d = new Date();
date = d.getFullYear() + '-' + (d.getMonth()+1);
//hardcoding as of now as jan 2014 data is not there, remove when req
date = "2013-01";
}
$.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat="+lat+"&lng="+lng+"&date="+date, function( data ) {
while(markers.length > 0){
markers.pop().setMap(null);
}
//marking the requested position
addMyPositionMarker(lat, lng);
$.each( data, function( key, val ) {
//var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
map: map,
animation: google.maps.Animation.DROP,
draggable: false,
title: val.location.street.name
});
markers.push(marker); // saving markers for reference, so that we can remove them later;
});
if(markers.length > 0){
fitBoundsMap();
}
});
}
function geocodeCrimeLocation(date){
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);
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
if(date == null){
var d = new Date();
date = d.getFullYear() + '-' + (d.getMonth()+1);
//hardcoding as of now as jan 2014 data is not there, remove when req
date = "2013-01";
}
$.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat="+latitude+"&lng="+longitude+"&date="+date, function(data) {
while(markers.length > 0){
markers.pop().setMap(null);
}
//marking the requested position
addMyPositionMarker(latitude, longitude);
$.each( data, function( key, val ) {
//var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
map: map,
animation: google.maps.Animation.DROP,
draggable: false,
title: val.location.street.name
});
markers.push(marker); // saving markers for reference, so that we can remove them later
});
if(markers.length > 0){
fitBoundsMap();
}
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function drawTable(){
var jsonData = $.ajax({
url: "getJSONData.php",
dataType:"json",
async: false
}).responseText;
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string','category');
dataTable.addColumn('string','context');
dataTable.addColumn('number','id');
dataTable.addColumn('string','location_subtype');
dataTable.addColumn('string','location_type');
dataTable.addColumn('string','month');
dataTable.addColumn('string','persistent_id');
dataTable.addColumn('string','street name');
var json=JSON.parse(jsonData);
for (var i=0; i<json.length; i++) {
delete json[i].outcome_status;
var row = [];
row.push(json[i].category);
row.push(json[i].context);
row.push(json[i].id);
row.push(json[i].location_subtype);
row.push(json[i].location_type);
row.push(json[i].month);
row.push(json[i].persistent_id);
row.push(json[i].location.street.name);
dataTable.addRow(row);
}
var chart = new google.visualization.Table(document.getElementById('table_div'));
chart.draw(dataTable, {width: 1000, height: 300});
}
HTML：
<body onload="initialize()">
<!-- <div id="map-canvas" style="width: 320px; height: 480px;"></div> -->
<div id="map-canvas" style="width: 100%; height: 480px;"></div>
<div>
<input id="address" type="textbox" placeholder = "Enter address, or postcode">
<input type="button" value="Encode" onclick="geocodeCrimeLocation()">
</div>
<br>
<div id = "pieChart_div">
</div>
<br>
<div id = "table_div">
</div>
</body>
PHP：
<?php
$json = file_get_contents('http://data.police.uk/api/crimes-street/all-crime?lat=$_GET['latitude']&lng=$_GET['longitude']&date=2013-01');
$json = str_replace("\xe2\x80\xa8", '\\u2028', $json);
$json = str_replace("\xe2\x80\xa9", '\\u2029', $json);
echo $json;
?>
先谢谢你的帮助。
答案 0 :(得分：0)
似乎问题是google.load('visualization', '1', {'packages':['table']});
我相信这是因为您没有包含可视化API脚本，就像您对地图一样。尝试使用您的其他脚本添加以下内容：
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
Visualization API文档： https://developers.google.com/chart/interactive/docs/index