Google GeoChart Visualization API - 在错误位置绘制城市答案

【问题标题】：Google GeoChart Visualization API - city plotting in wrong locationGoogle GeoChart Visualization API - 在错误位置绘制城市
【发布时间】：2014-10-08 18:57:35
【问题描述】：

出于某种原因，在我正在开发的网站上，“旧金山”正在 Google GeoChart 可视化中在路易斯安那州放置一个标记。我什至尝试将其更改为“旧金山，加利福尼亚州”，甚至“旧金山，加利福尼亚州，美国”，它仍在路易斯安那州进行绘制。

您可以在这里看到不正确的标记：http://galmeetsglam.com/travel/

我的部分代码：

var data = new google.visualization.DataTable();

data.addColumn('string', 'Slug');
data.addColumn('string', 'City');           
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p:{html:true}});

/* Locations */
data.addRows([
    ['london', 'London', 1, '<h1 class="tooltip-h1">London</h1>'],
    ['london', 'London', 1, '<h1 class="tooltip-h1">London</h1>'],
    ['new-york-city', 'New York City', 1, '<h1 class="tooltip-h1">New York City</h1>'],
    ['san-francisco-2', 'San Francisco', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
    ['san-francisco-2', 'San Francisco', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
]);

奇怪的是，其他城市（伦敦和纽约）的规划还不错。不知道为什么 SF 搞砸了。

有什么想法吗？

【问题讨论】：

标签： google-maps google-api google-visualization

【解决方案1】：

不确定您为什么使用san-francisco-2，但您应该使用San Francisco 作为您的第二列或提供iso 代码：US-CA。所以：

data.addRows([
    ['london', 'London', 1, '<h1 class="tooltip-h1">London</h1>'],
    ['london', 'London', 1, '<h1 class="tooltip-h1">London</h1>'],
    ['new-york-city', 'New York City', 1, '<h1 class="tooltip-h1">New York City</h1>'],
    ['San Francisco', 'San Francisco', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
    ['San Francisco', 'San Francisco', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
]);

【讨论】：

是的，我把蛞蝓和城市名倒过来了。我刚刚重新安排了它们，一切顺利。

【解决方案2】：

在 Google Visualization API 论坛中找到答案。

基本上，GeoChart 使用第一个元素进行地理编码。我首先有我的类别 slug（我将其用于 Isotope 的过滤机制）。

因此，如果我将数据重新排列为：

var data = new google.visualization.DataTable();

data.addColumn('string', 'City');
data.addColumn('string', 'Slug');           
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p:{html:true}});

/* Locations */
data.addRows([
    ['London', 'london', 1, '<h1 class="tooltip-h1">London</h1>'],
    ['London', 'london', 1, '<h1 class="tooltip-h1">London</h1>'],
    ['New York City', 'new-york-city', 1, '<h1 class="tooltip-h1">New York City</h1>'],
    ['San Francisco', 'san-francisco-2', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
    ['San Francisco', 'san-francisco-2', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
]);

完美运行。只是为以后有相同问题的访问者自己回答这个问题。

【讨论】：