Google 工作表:地图未使用自定义标记呈现
Google Sheets: Map Not Rendering with Custom Markers
我正在尝试在 Google 表格中渲染地图并设置自定义标记。我遵循了讨论该主题的 App 脚本文档:Visualization: Map。地图在正确的位置呈现图标,但图标是默认设置。
我检查了我的 img 网址(通过将它们设置为默认网址)并且它们有效(以下网址是假的)。我认为问题出在将 options.icons.keys 与数据表第 3 列中的数据相匹配。
这是从<?= jsonPoints ?>
中提取的原始数据
[[29.59260664700021,-95.77028110299972,"Red"],
[29.591301814000055,-95.76907472100011,"Green"],
[29.591178932000005,-95.76802742100018,"Red"],
[29.587551849000003,-95.77229599100004,"Blue"]]
这是创建地图的函数:
function drawMap() {
points = <?= jsonPoints ?>;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Latitude');
data.addColumn('number', 'Longitude');
data.addColumn('string', 'Point Type');
data.addRows(JSON.parse(points))
var url = 'https://image.ibb.co/';
var options = {
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
Red: {
normal: url + '/red.png',
selected: url + '/red.png'
},
Blue: {
normal: url + '/Blue.png',
selected: url + '/Blue.png'
},
Green: {
normal: url + '/Green.png',
selected: url + '/Green.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('chart'));
map.draw(data, options);
};
我试过在 options.icons.keys 上加上引号,比如 "Green"
,但是没有用。
有什么想法吗?
谢谢!
想通了。添加了具有基本相同数据的第四列。一列用于工具提示,另一列用作标记:
data.addColumn('number', 'Latitude');
data.addColumn('number', 'Longitude');
data.addColumn('string', 'Tooltip_Data');
data.addColumn('string', 'Marker');
现在图标被渲染了!
我正在尝试在 Google 表格中渲染地图并设置自定义标记。我遵循了讨论该主题的 App 脚本文档:Visualization: Map。地图在正确的位置呈现图标,但图标是默认设置。
我检查了我的 img 网址(通过将它们设置为默认网址)并且它们有效(以下网址是假的)。我认为问题出在将 options.icons.keys 与数据表第 3 列中的数据相匹配。
这是从<?= jsonPoints ?>
[[29.59260664700021,-95.77028110299972,"Red"],
[29.591301814000055,-95.76907472100011,"Green"],
[29.591178932000005,-95.76802742100018,"Red"],
[29.587551849000003,-95.77229599100004,"Blue"]]
这是创建地图的函数:
function drawMap() {
points = <?= jsonPoints ?>;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Latitude');
data.addColumn('number', 'Longitude');
data.addColumn('string', 'Point Type');
data.addRows(JSON.parse(points))
var url = 'https://image.ibb.co/';
var options = {
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
Red: {
normal: url + '/red.png',
selected: url + '/red.png'
},
Blue: {
normal: url + '/Blue.png',
selected: url + '/Blue.png'
},
Green: {
normal: url + '/Green.png',
selected: url + '/Green.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('chart'));
map.draw(data, options);
};
我试过在 options.icons.keys 上加上引号,比如 "Green"
,但是没有用。
有什么想法吗?
谢谢!
想通了。添加了具有基本相同数据的第四列。一列用于工具提示,另一列用作标记:
data.addColumn('number', 'Latitude');
data.addColumn('number', 'Longitude');
data.addColumn('string', 'Tooltip_Data');
data.addColumn('string', 'Marker');
现在图标被渲染了!