谷歌地图折线完全未显示

Question

谷歌地图折线完全未显示

javascriptrgoogle-mapsgoogle-visualization

3

我可以翻译为：

我使用GoogleVis包生成了一些JavaScript。但是，在我的代码中，折线并没有显示出来。我已经尝试过多个浏览器，但都无法解决这个问题。接下来，我会先展示一些简约的R代码，以便更好地理解问题。之后，我将展示它所生成的HTML/JavaScript代码。请问有人可以告诉我是否有做错什么，并提供修复建议。

R 代码：

 require(googleVis)
 df <- data.frame(Postcode =      c("77003","08540","80545"),Tip=c("Houston","Princeton","Red Feather Lakes"))
 M <- gvisMap(df, "Postcode", "Tip",
          options=list(showLine=TRUE,lineWidth=20,lineColor='red'))
 plot(M)
 cat(unlist(M))

生成的 HTML/Javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MapID88977a251b2</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
  color: #444444;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 75%;
  }
  a {
  color: #4D87C7;
  text-decoration: none;
}
</style>
</head>
<body>
 <!-- Map generated in R 3.2.2 by googleVis 0.5.10 package -->
<!-- Mon Sep  7 16:32:28 2015 -->


<!-- jsHeader -->
<script type="text/javascript">

// jsData 
function gvisDataMapID88977a251b2 () {
var data = new google.visualization.DataTable();
var datajson =
[
 [
 "77003",
"Houston" 
],
[
 "08540",
"Princeton" 
],
[
 "80545",
"Red Feather Lakes" 
] 
];
data.addColumn('string','Postcode');
data.addColumn('string','Tip');
data.addRows(datajson);
return(data);
}

// jsDrawChart
function drawChartMapID88977a251b2() {
var data = gvisDataMapID88977a251b2();
var options = {};
options["showTip"] = true;
options["showLine"] = true;
options["lineWidth"] =     20;
options["lineColor"] = "red";


    var chart = new google.visualization.Map(
    document.getElementById('MapID88977a251b2')
    );
    chart.draw(data,options);


}


// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "map";

// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
  pkgs.push(chartid);

// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartMapID88977a251b2);
})();
function displayChartMapID88977a251b2() {
  var pkgs = window.__gvisPackages = window.__gvisPackages || [];
  var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
  window.clearTimeout(window.__gvisLoad);
  // The timeout is set to 100 because otherwise the container div we are
  // targeting might not be part of the document yet
  window.__gvisLoad = setTimeout(function() {
  var pkgCount = pkgs.length;
  google.load("visualization", "1", { packages:pkgs, callback: function() {
  if (pkgCount != pkgs.length) {
  // Race condition where another setTimeout call snuck in after us; if
  // that call added a package, we must not shift its callback
  return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}

// jsFooter
</script>

<!-- jsChart -->  
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartMapID88977a251b2"></script>

<!-- divChart -->

<div id="MapID88977a251b2" 
  style="width: 500; height: automatic;">
</div>
 <div><span>Data: df &#8226; Chart ID: <a href="Chart_MapID88977a251b2.html">MapID88977a251b2</a> &#8226; <a href="https://github.com/mages/googleVis">googleVis-0.5.10</a></span><br /> 
<!-- htmlFooter -->
<span> 
  R version 3.2.2 (2015-08-14) 
  &#8226; <a href="https://developers.google.com/terms/">Google Terms of Use</a> &#8226; <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/map">Documentation and Data Policy</a>
</span></div>
</body>
</html>

- mathlawguy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dr.Molle · Accepted Answer

似乎文档有误：

“lineWidth”

如果“showLine”为true，则定义线宽（以像素为单位）。

类型：数字

默认值：10

选项“lineWidth”似乎被忽略，而是设置一个（目前未记录的）选项“lineWeight”（它不会默认为“10”，因此您必须将此选项设置为数字> 0）。

google.load("visualization", "1", {packages:["map"]});
google.setOnLoadCallback(drawMap);
function drawMap() {
var arr = [
['postcode','name'],
 [
 "77003",
"Houston" 
],
[
 "08540",
"Princeton" 
],
[
 "80545",
"Red Feather Lakes" 
] 
]
var data = google.visualization.arrayToDataTable(arr);
    var map = new google.visualization.Map(document.getElementById('map_div'));
    map.draw(data, { showLine: true,lineWeight:20,lineColor:'red',enableScrollWheel:true});

}

html,body,#map_div{
height:100%;padding:0;margin:0;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="map_div"></div>