Javascript 谷歌让区域可点击_Javascript_Google Maps

Javascript 谷歌让区域可点击

javascript google-maps

Javascript 谷歌让区域可点击,javascript,google-maps,Javascript,Google Maps,我从谷歌为我的网站制作了这幅地图，但我希望这些地区可以点击。所以当我点击它来显示信息时，我想添加关于那个地区的信息。我想设置输出文本的样式还有一件事：我只想显示该国的地图，而不显示周围的国家，因此我希望地图形状为该国（在本例中为马其顿），而不是矩形。下面是js代码： <html> <head> <script type='text/javascript' src='https://www.google.com/jsapi'></s

我从谷歌为我的网站制作了这幅地图，但我希望这些地区可以点击。所以当我点击它来显示信息时，我想添加关于那个地区的信息。我想设置输出文本的样式

还有一件事：我只想显示该国的地图，而不显示周围的国家，因此我希望地图形状为该国（在本例中为马其顿），而不是矩形。下面是js代码：

 <html>
      <head>
    <script type='text/javascript' src='https://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', 'city');
    data.addColumn('number', 'Value'); 
    data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array(); var name = new Array();

    data.addRows([[{v:'MK-76',f:'Tetovë'},0,'Kipper Market']]);
    ivalue['MK-TE'] = 'Obama (D)  will <span style="color:#444; font-weight:bold;">win</span> in Alaska.';


    data.addRows([[{v:'MK-19',f:'Gostivar'},0,'Kipper Market']]);
    ivalue['MK-GV'] = 'Obama (D)  will <span style="color:#444; font-weight:bold;">win</span> in Alaska.';

    data.addRows([[{v:'MK-40',f:'Kërçovë'},0,'Kipper Market']]);
    ivalue['MK-KI'] = 'Obama (D)  will <span style="color:#444; font-weight:bold;">win</span> in Alaska.';





     var options = {
     backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
     colorAxis:  {minValue: 0, maxValue: 49,  colors: ['#ec2227','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E',]},
     legend: 'none',  
     backgroundColor: {fill:'none',stroke:'none' ,strokeWidth:0 },  
     datalessRegionColor: '#f5f5f5',
     displayMode: 'regions', 
     enableRegionInteractivity: 'true', 
     resolution: 'provinces',
     sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
     region:'MK',
     keepAspectRatio: true,
     width:100 + "%",
     height:100 + '%',
     tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}  
     };
      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.getElementById('message').innerHTML = ivalue[selectedRegion];}
      if(name[selectedRegion] != '') {document.getElementById('name').innerHTML = name[selectedRegion];}
      }
      });
      chart.draw(data, options);



      go();

      window.addEventListener('resize', go);

      function go(){
       chart.draw(data, options);
       }
      }

      </script>
      </head>
      <body>
        <div id="container">
      <div id="visualization"></div>
      <div id="message"></div>
     </div>

      </body>
     </html>


load（'visualization'，'1'，{'packages'：['geochart']}）；
setOnLoadCallback（drawVisualization）；
函数drawVisualization（）{var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'city'）；
data.addColumn（'number'，'Value'）；
data.addColumn（{type:'string'，role:'tooltip'}）；var-ivalue=new-Array（）；var-name=new-Array（）；
addRows（[{v:'MK-76'，f:'Tetovë'}，0，'Kipper Market']）；
ivalue['MK-TE']=“奥巴马（民主党）将在阿拉斯加获胜。”；
addRows（[{v:'MK-19'，f:'Gostivar'}，0，'Kipper Market']]）；
ivalue['MK-GV']=“奥巴马（民主党）将在阿拉斯加获胜。”；
data.addRows（[{v:'MK-40'，f:'Kërèovë'}，0，'Kipper Market']）；
ivalue['MK-KI']=“奥巴马（民主党）将在阿拉斯加获胜。”；
变量选项={
背景颜色：{fill:'#FFFFFF'，stroke:'#FFFFFF'，strokeWidth:0}，
colorAxis:{minValue:0，maxValue:49，颜色：ţ零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零“438094'，#43808094'，35808094'，35808094'，35808094'，358094'，358094'，35808094'，35808094'，，35808094'，，35808094'，348080808080808094，35808080808080808094'，，，35808080808080808080808080808094'，，，，，35808080808080808080808080808080808080808094，，，，，，，3434343434343'34343434;脱脱脱脱脱脱脱脱脱脱脱脱脱脱脱脱三三三'''''''，，343''，343'''，343''，35;脱脱脱脱脱脱脱脱脱脱脱脱脱脱；DE3403","DE3403","DE3403","DE3403","DE3403","DE3403","E0D39E","E0D39E","E0D39E"E0D39E","E0D39E","E0D39E"","e0e"""e0e""","e0e"""e0，
图例：“无”，
背景颜色：{fill:'none'，stroke:'none'，strokeWidth:0}，
datalessRegionColor:“#F5”，
显示模式：“区域”，
enableRegionInteractivity:“true”，
决议：“各省”，
sizeAxis:{minValue:1，maxValue:1，minSize:10，maxSize:10}，
地区：'MK'，
keepAspectRatio：对，
宽度：100+“%”，
高度：100+“%”，
工具提示：{textStyle:{color:'#444444'}，触发器：'focus'}
};
var chart=new google.visualization.geograpart（document.getElementById（'visualization'）；
google.visualization.events.addListener（图表'select'，函数（）{
var selection=chart.getSelection（）；
if（selection.length==1）{
var selectedRow=selection[0]。行；
var selectedRegion=data.getValue（selectedRow，0）；
if（ivalue[selectedRegion]！=''{document.getElementById（'message'）。innerHTML=ivalue[selectedRegion]；}
if（name[selectedRegion]！=''{document.getElementById（'name'）。innerHTML=name[selectedRegion]；}
}
});
图表绘制（数据、选项）；
go（）；
window.addEventListener（'resize'，go）；
函数go（）{
图表绘制（数据、选项）；
}
}

您可以试试这个

google.visualization.events.addListener(chart, 'select', function() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var country = data.getValue(selectedItem.row, 0);
      alert (country);

      if(ivalue[country] != '') {document.getElementById('message').innerHTML = ivalue[country];}
      if(name[country] != '') {document.getElementById('name').innerHTML = name[country];}
    }    
  });

这是一个非常有趣的解决方案。我想投票给你的答案，但我需要15个声誉…但是…我需要的信息显示在地图下方作为正常的文本（这将是很好的，如果你告诉我如何样式以及。一些文本显示为粗体，一些只作为段落）。还有，如何摆脱周围的国家。我如何编辑此svg以删除周围国家的路径？我可以在chrome上的inspect元素中看到它，但我不知道在哪里编辑它。