我怎样才能使地图的边框更粗 Google Geomap?
How can I make the borders of my map thicker Google Geomap?
我正在使用 deploying to google appengine 的 dhtml 地图。现在我想让边框更暗更粗。怎么做到呢?我部署了这张地图
我的模型如下所示
我们可以试着让我的地图看起来更像模型吗?我目前的代码是这样的。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="http://www.w3.org/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();
var options = {
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
colorAxis: {minValue: 0, maxValue: 0, colors: []},
legend: 'none',
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
datalessRegionColor: '#ffc801',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
var selectedRegion = data.getValue(selectedRow, 0);
if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion]; }
}
});
chart.draw(data, options);
}
</script>
<div id='visualization'></div>>
</body>
</html>
更新
我根据答案改代码了。现在我没有得到我预期的结果。这是现在的代码。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="http://www.w3.org/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();
var options = {
backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 75 },
colorAxis: {minValue: 0, maxValue: 0, colors: []},
legend: 'none',
datalessRegionColor: '#ffc801',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
var selectedRegion = data.getValue(selectedRow, 0);
if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion]; }
}
});
chart.draw(data, options);
}
</script>
<div id='visualization'></div>
</body>
</html>
当我 运行 上面的代码时,我在地图周围得到了一个黑暗区域,而不是较粗的边界。可以做什么?
更新
如果我使用 iframe
,则缩放不会裁剪地图区域并且悬停不会按预期工作。
path {
stroke: #555;
}
#wrapper2 { width: 450px; height: 450px; padding: 0; overflow: hidden; }
#scaled-frame { width: 400px; height: 400px; border: 0px; }
#scaled-frame {
zoom: 0.61;
overflow: hidden;
-moz-transform: scale(0.61);
-moz-transform-origin: 0 0;
-o-transform: scale(0.61);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.61);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame { zoom: 1; }
}
<div id="wrapper2">
<iframe id="scaled-frame" src="/_/mapframe.html" height="300" width="500" ></iframe>
</div>
根据文档 (https://developers.google.com/chart/interactive/docs/gallery/geochart#coloring),您应该可以设置
backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 30 }
这会将地图区域设置为白色填充和黑色边框,边框宽度为 30 像素。您应该调整 strokeWidth 值以使其达到您想要的大小。另外,看起来你已经定义了两次。删除其中一个 backgroundColor 定义。
您是否尝试过更改
中的值
<style xmlns="http://www.w3.org/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
像这样尝试在路径和 :hover 中添加笔画规则
path { fill: #ffac; stroke:#fff; }
:hover { fill: #fcafff; stroke:#000;}
此解决方案将使选定区域在未悬停时能够显示黑色笔划和白色笔划。但是,对于地图上的某些区域,它无法正常工作,您必须将鼠标悬停在边缘上以获得黑色笔划。但我相信这给了我们正确解决方案的提示,对吧?
在元素 <path>
上使用 stroke
CSS 属性 以获得更粗的边框,
这是一个 SVG HTML5 功能。
在您的 .css
文件中添加:
path {
stroke: #555;
}
要仅显示印度,您需要将 scale
属性 设置为最适合您的 HTML5 画布的内容。检查您使用的框架 API 并了解如何管理规模。
我正在使用 deploying to google appengine 的 dhtml 地图。现在我想让边框更暗更粗。怎么做到呢?我部署了这张地图
我的模型如下所示
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="http://www.w3.org/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();
var options = {
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
colorAxis: {minValue: 0, maxValue: 0, colors: []},
legend: 'none',
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
datalessRegionColor: '#ffc801',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
var selectedRegion = data.getValue(selectedRow, 0);
if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion]; }
}
});
chart.draw(data, options);
}
</script>
<div id='visualization'></div>>
</body>
</html>
更新
我根据答案改代码了。现在我没有得到我预期的结果。这是现在的代码。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style xmlns="http://www.w3.org/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();
var options = {
backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 75 },
colorAxis: {minValue: 0, maxValue: 0, colors: []},
legend: 'none',
datalessRegionColor: '#ffc801',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
var selectedRegion = data.getValue(selectedRow, 0);
if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion]; }
}
});
chart.draw(data, options);
}
</script>
<div id='visualization'></div>
</body>
</html>
当我 运行 上面的代码时,我在地图周围得到了一个黑暗区域,而不是较粗的边界。可以做什么?
更新
如果我使用 iframe
,则缩放不会裁剪地图区域并且悬停不会按预期工作。
path {
stroke: #555;
}
#wrapper2 { width: 450px; height: 450px; padding: 0; overflow: hidden; }
#scaled-frame { width: 400px; height: 400px; border: 0px; }
#scaled-frame {
zoom: 0.61;
overflow: hidden;
-moz-transform: scale(0.61);
-moz-transform-origin: 0 0;
-o-transform: scale(0.61);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.61);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame { zoom: 1; }
}
<div id="wrapper2">
<iframe id="scaled-frame" src="/_/mapframe.html" height="300" width="500" ></iframe>
</div>
根据文档 (https://developers.google.com/chart/interactive/docs/gallery/geochart#coloring),您应该可以设置
backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 30 }
这会将地图区域设置为白色填充和黑色边框,边框宽度为 30 像素。您应该调整 strokeWidth 值以使其达到您想要的大小。另外,看起来你已经定义了两次。删除其中一个 backgroundColor 定义。
您是否尝试过更改
中的值<style xmlns="http://www.w3.org/2000/svg">
path { fill: #ffc801; }
:hover { fill: #fcafff; }
</style>
像这样尝试在路径和 :hover 中添加笔画规则
path { fill: #ffac; stroke:#fff; }
:hover { fill: #fcafff; stroke:#000;}
此解决方案将使选定区域在未悬停时能够显示黑色笔划和白色笔划。但是,对于地图上的某些区域,它无法正常工作,您必须将鼠标悬停在边缘上以获得黑色笔划。但我相信这给了我们正确解决方案的提示,对吧?
在元素 <path>
上使用 stroke
CSS 属性 以获得更粗的边框,
这是一个 SVG HTML5 功能。
在您的 .css
文件中添加:
path {
stroke: #555;
}
要仅显示印度,您需要将 scale
属性 设置为最适合您的 HTML5 画布的内容。检查您使用的框架 API 并了解如何管理规模。