个人中心
gpt4 book ai didi

javascript - 谷歌地图折线根本不显示

转载 作者：行者123 更新时间：2023-11-29 10:11:35 24 4
gpt4 key购买 nike

我使用 R 的 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>

最佳答案

似乎文档不正确:

lineWidth

If showLine is true, defines the line width (in pixels).
Type: number
Default: 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>

关于javascript - 谷歌地图折线根本不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32446364/

24 4 0
文章推荐： javascript - Angular : Weird custom directive
文章推荐： mysql - 批量更新 mysql 行 : better performance to exclude those already having the value?
文章推荐： javascript - 如何使用 AngularJS 制作基于单选按钮值的下拉列表？
文章推荐： PHP MySQL SELECT 语句返回 null
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com