如何使我的地图的边界更厚 Google Geomap？
Posted
技术标签:
【中文标题】如何使我的地图的边界更厚 Google Geomap？【英文标题】：How can I make the borders of my map thicker Google Geomap? 【发布时间】：2015-02-13 18:57:07 【问题描述】：我使用的是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" ></iframe>
</div>
【问题讨论】：
你的 DOM 是否创建 SVG 标签？ @BrianS 我不知道。如果我知道在哪里看，我可以看一下。我还多次阅读手册，手册没有说明我想要实现的目标（仅显示印度并且边框更厚）。我认为这应该是可行的，但我似乎还没有完成它。 如果我看到实际页面可以帮助您吗？我之前用过d3.js，这个听起来很像 好吧，你可以看看带有代码plnkr.co/edit/DvUzclRXB4l1OcuZ6yxJ?p=preview 的页面我要添加的两个功能是 a) 更粗的边框和 b) 仅显示印度而不是邻国。 【参考方案1】：在元素<path> 上使用stroke CSS 属性以获得更粗的边框，
这是SVG HTML5 功能。
在您的 .css 文件中添加：
path
stroke: #555;
要仅显示印度，您需要将 scale 属性设置为最适合您的 HTML5 画布的值。查看您使用的框架 API 并了解如何管理规模。
【讨论】：
谢谢。现在肯定有所改善。但是，我在谷歌搜索时找不到有关scale 属性的任何信息。如果可以，欢迎您提供更多相关信息。
您是否搜索过 javascript 框架或 css 的 scale 属性？
是的，我正在尝试从该搜索中找到我可以使用的东西。框架字 D3 出现在搜索中。我不认为我可以使用有关此的信息。我用谷歌搜索规模属性 google geochart 没有成功。我们有一个Plnkr example 我正在尝试做的事情。
我明白了，该文档中没有 scale 属性。我们必须想出一个技巧。尝试在 <iframe> 中使用 overflow: hidden; 和 css zoom: 2 ; 属性的地图。
@NiklasRosencratz 我不认为你可以做任何其他事情。您的另一个选择是使用其他框架（如 d3.js）或专门为地图创建一个 javascript 函数（需要很多时间）【参考方案2】：
您是否尝试过更改
中的值<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;
此解决方案将使选定区域在未悬停时能够显示黑色描边和白色描边。但是，对于地图上的某些区域，它不能正常工作，您必须将鼠标悬停在边缘上才能获得黑色笔触。但我相信这给了我们正确解决方案的提示，对吧？
【讨论】：
【参考方案3】：根据文档（https://developers.google.com/chart/interactive/docs/gallery/geochart#coloring），您应该可以设置
backgroundColor: fill: '#FFF', stroke: '#000', strokeWidth: 30
这会将地图的区域设置为带有黑色边框的白色填充，边框宽度为 30 像素。您应该使用 strokeWidth 值以使其达到您想要的大小。此外，看起来您已经定义了两次。删除其中一个 backgroundColor 定义。
【讨论】：
以上是关于如何使我的地图的边界更厚 Google Geomap？的主要内容，如果未能解决你的问题，请参考以下文章
在 Google Maps API v3 中缩放到 geojson 多边形边界