【发布时间】：2013-12-21 16:38:58
【问题描述】：
我正在尝试创建一个谷歌地图，它根据此处显示的解决方案使用自定义地图标记从 Fusion Table 加载地图数据： http://code.google.com/p/fusion-tables/issues/detail?id=69#c107
我的此代码版本正在显示地图，而且似乎来自 Fusion Table 的 json 数据请求成功，但地图上没有显示任何标记。
有人可以建议我做错了什么吗？
页面在这里： http://clorentzen.com/queensbrewery/fusiontable.html
谢谢！
更多信息： 桌子： https://www.google.com/fusiontables/DataSource?docid=1coED7p2uvV31pMNMPhHsrPRxZCfZv4b9LvkvrCc
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Table version of QB on draft info</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
#map-canvas {
height: 500px;
width: 600px;
}
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
var map;
var infoWindow = new google.maps.InfoWindow();
var DEFAULT_ICON_URL = 'http://clorentzen.com/queensbrewery/qb_maps.png';
// EDIT: change this key to your own from the Google APIs Console
// https://code.google.com/apis/console/
var apiKey = 'AIzaSyAlluI5j2piL1x7OK8dOiZRreO3L6VCZSQ';
// EDIT: Specify the table with location data and icon URLs
var tableID = '1coED7p2uvV31pMNMPhHsrPRxZCfZv4b9LvkvrCc';
// Create variables for the columns you need to retrieve from the table
// EDIT this list as needed, then find and edit two places below.
var latitudeColumn = 'LATITUDE';
var longitudeColumn = 'LONGITUDE';
var iconUrlColumn = 'ICON';
var venueColumn = 'BAR';
var addressColumn = 'ADDRESS';
var neighborhoodColumn = 'NEIGHBORHOOD';
var regionColumn = 'REGION';
function createMarker (coordinate, url, content) {
var marker = new google.maps.Marker({
map: map,
position: coordinate,
icon: new google.maps.MarkerImage(url)
});
google.maps.event.addListener(marker, 'click', function(event) {
infoWindow.setPosition(coordinate);
infoWindow.setContent(content);
infoWindow.open(map);
});
};
function fetchData() {
// Construct a query to get data from the Fusion Table
// EDIT this list to include the variables for columns named above
var query = 'SELECT '
+ latitudeColumn + ','
+ longitudeColumn + ','
+ iconUrlColumn + ','
+ venueColumn + ','
+ addressColumn + ','
+ neighborhoodColumn + ','
+ regionColumn + ' FROM '
+ tableID;
var encodedQuery = encodeURIComponent(query);
// Construct the URL
var url = ['https://www.googleapis.com/fusiontables/v1/query'];
url.push('?sql=' + encodedQuery);
url.push('&key=' + apiKey);
url.push('&callback=?');
// Send the JSONP request using jQuery
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: onDataFetched
});
}
function onDataFetched(data) {
var rows = data['rows'];
var iconUrl;
var content;
var coordinate;
// Copy each row of data from the response into variables.
// Each column is present in the order listed in the query.
// Starting from 0.
// EDIT this if you've changed the columns, above.
for (var i in rows) {
coordinate = new google.maps.LatLng(rows[i][0],rows[i][1]);
iconUrl = rows[i][2];
content = "<strong>" + rows[i][3] + "</strong><br>" + rows[i][4] + "<br>" + rows[i][5] + ", " + rows[i][6] + "<br>";
if (iconUrl) { // ensure not empty
createMarker(coordinate, iconUrl, content);
} else {
createMarker(coordinate, DEFAULT_ICON_URL, content);
}
}
}
function initialize() {
fetchData(); // begin retrieving data from table, and put it on the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(40.7,-73.8),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
【问题讨论】：
-
请在您的问题中发布相关代码，而不仅仅是一个链接，那么即使您的链接不起作用（就像您的情况一样），我们也可以提供帮助。对于 FusionTables 问题，表格链接也很有用。
标签： google-maps google-fusion-tables