如何使我的地图的边界更厚 Google Geomap？答案

【问题标题】：How can I make the borders of my map thicker Google Geomap?如何使我的地图的边界更厚 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" height="300" width="500" ></iframe>
</div>

【问题讨论】：

你的 DOM 是否创建 SVG 标签？
@BrianS 我不知道。如果我知道在哪里看，我可以看一下。我还多次阅读手册，手册没有说明我想要实现的目标（仅显示印度并且边框更厚）。我认为这应该是可行的，但我似乎还没有完成它。
如果我看到实际页面可以帮助您吗？我之前用过d3.js，这个听起来很像
好吧，你可以看看带有代码plnkr.co/edit/DvUzclRXB4l1OcuZ6yxJ?p=preview 的页面我要添加的两个功能是 a) 更粗的边框和 b) 仅显示印度而不是邻国。

标签： javascript html css geography

【解决方案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 定义。

【讨论】：