Javascript 我如何使我的地图边界更厚的谷歌地图？_Javascript_Html_Css_Geography

Javascript 我如何使我的地图边界更厚的谷歌地图？

javascript html css

Javascript 我如何使我的地图边界更厚的谷歌地图？,javascript,html,css,geography,Javascript,Html,Css,Geography,我正在使用我正在使用的dhtml地图。现在我想让边界变得更黑更厚。怎样才能做到呢？我部署了这张地图我的模型如下所示我们能试着让我的地图看起来更像模型吗？到目前为止，我的代码是这样的 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> &l

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

根据文档（），您应该能够设置

backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 30 }

这将设置地图区域的白色填充和黑色边框，边框宽度为30px。您应该使用strokeWidth值使其达到所需的大小。而且，看起来您已经定义了两次。删除背景颜色定义之一。

是否尝试更改中的值

<style xmlns="http://www.w3.org/2000/svg">
    path { fill: #ffc801; }
    :hover { fill: #fcafff; }
  </style>

此解决方案将使选定区域在未悬停时能够显示黑色笔划和白色笔划。然而，对于地图上的某些区域，它无法正常工作，您必须将鼠标悬停在边缘上才能获得黑色笔划。但我相信这给了我们一个正确解决方案的暗示，对吗

在元素

上使用

stroke

CSS属性以获得更厚的边框，这是一个特点

在
.css
文件中添加以下内容：

path {
  stroke: #555;
}

要仅显示印度，您需要将

scale

属性设置为最适合您的HTML5 canavas。检查您使用的框架API并找出如何管理规模。

您的DOM是否创建SVG标记？@BrianS我不知道。如果我知道去哪里找，我可以看看。我也读了几遍手册，但手册没有提到我想要实现的目标（只显示印度和更厚的边界）。我认为这应该是可行的，但我似乎还没有完成。如果我看到实际的页面，我可以帮你吗？我以前使用过d3.js，这听起来很相似。好吧，你可以看看代码页面。我想添加的两个功能是a）更厚的边框和b）只显示印度，不显示邻国。谢谢。现在情况肯定有所改善。然而，我在谷歌搜索时找不到任何关于

scale

属性的信息。如果可以的话，欢迎您提供更多信息。您是否搜索了javascript框架或css的scale属性？是的，我正在尝试从该搜索中找到可以使用的内容。框架词D3出现在搜索中。不过我想我不能用这些信息。我在谷歌上搜索了scale property，但没有成功。我们对我要做的事情有一个简单的描述。我明白了，在那个文档中没有比例属性。我们得想出一个办法。尝试将

中的映射替换为

溢出：隐藏和csszoom:2属性。@NiklasRosencrantz我认为你不能做任何其他事情。您的另一个选择是使用其他框架（如d3.js）或专门为映射创建javascript函数（需要很多时间）
<style xmlns="http://www.w3.org/2000/svg">
    path { fill: #ffc801; }
    :hover { fill: #fcafff; }
  </style>

path { fill: #ffac; stroke:#fff; }
:hover { fill: #fcafff; stroke:#000;}

path {
  stroke: #555;
}