6、谷歌地图官方API-组合和可视化多个数据源

最新推荐文章于 2023-06-11 00:29:41 发布

lwbsleep

最新推荐文章于 2023-06-11 00:29:41 发布

阅读量468

点赞数

分类专栏： JS 文章标签： javascript

原文链接：https://developers.google.com/maps/documentation/javascript/combining-data

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

组合和可视化多个数据源

总览

本教程向您展示如何在Google地图上显示来自多个来源的数据。例如，下面的choropleth映射使用两个不同的来源来突出显示美国的各个州，并显示特定于州的数据。

该地图使用来自GeoJSON文件的数据来显示定义美国州边界的多边形。它还可以在地图上显示与每个州相对应的数据，这些数据来自对美国人口普查API的模拟查询。

从控件下拉菜单中选择数据类别，以更新地图上的多边形。您还可以将鼠标悬停在状态多边形上，以在地图上的数据框控件中查看特定于状态的信息。

下面的示例显示了创建此映射所需的全部代码。

提示：查看 NYC Subway Locator解决方案，以查看将GeoJSON数据与地图结合使用的另一个示例。

自己尝试

您可以通过单击<>代码窗口右上角的图标来在JSFiddle中尝试此代码。

<span style="color:#37474f"><span style="color:#c53929"><！DOCTYPE html> </span><span style="color:#3b78e7"><html> </span><span style="color:#3b78e7"><head> </span><span style="color:#3b78e7"><元</span><span style="color:#9c27b0">字符集</span>= <span style="color:#0d904f">“ utf-8” </span><span style="color:#3b78e7">> </span><span style="color:#3b78e7"><元</span><span style="color:#9c27b0">名称</span>= <span style="color:#0d904f">“视口” </span><span style="color:#9c27b0">content </span>= <span style="color:#0d904f">“初始比例= 1.0，用户可缩放比例=否” </span><span style="color:#3b78e7">/> </span><span style="color:#3b78e7"><title> </span>具有以下内容的混搭google.maps.Data <span style="color:#3b78e7"></ title> </span><span style="color:#3b78e7"><style> </span>      html ，body ，＃map { <span style="color:#3b78e7">高度</span>：<span style="color:#c53929">100％</span>; <span style="color:#3b78e7">边距</span>：<span style="color:#c53929">0 </span>; <span style="color:#3b78e7">填充</span>：<span style="color:#c53929">0 </span>; <span style="color:#3b78e7">溢出</span>：隐藏; } 。

  
     
       
    
    
         
        
          <span style="color:#3b78e7">职位</span>：绝对; <span style="color:#3b78e7">text-align </span>：center ; <span style="color:#3b78e7">字体系列</span>：<span style="color:#0d904f">“ Roboto” </span>，<span style="color:#0d904f">“ Arial” </span>，无衬线；<span style="color:#3b78e7">字体大小</span>：<span style="color:#c53929">13px </span>; <span style="color:#3b78e7">z索引</span>：<span style="color:#c53929">5 </span>；<span style="color:#3b78e7">box-shadow </span>：<span style="color:#c53929">0 </span><span style="color:#c53929">4px </span><span style="color:#c53929">6px </span>- <span style="color:#c53929">4px </span><span style="color:#c53929">＃333 </span>; <span style="color:#3b78e7">填充</span>：<span style="color:#c53929">5px </span><span style="color:#c53929">10px </span>; <span style="color:#3b78e7">背景</span>：<span style="color:#3b78e7">RGB </span>（<span style="color:#c53929">255 </span>，<span style="color:#c53929">255 </span>，<span style="color:#c53929">255 </span>）; <span style="color:#3b78e7">背景</span>：
          
            
           
           
               
            
           
          线性梯度（至底部，RGBA （<span style="color:#c53929">255 </span>，<span style="color:#c53929">255 </span>，<span style="color:#c53929">255 </span>，<span style="color:#c53929">1 </span>）<span style="color:#c53929">0％ </span>，RGBA （<span style="color:#c53929">245 </span>，<span style="color:#c53929">245 </span>，<span style="color:#c53929">245 </span>，<span style="color:#c53929">1 </span>）<span style="color:#c53929">100％</span>）; <span style="color:#3b78e7">边界</span>：，            HSL （<span style="color:#c53929">102 </span>，<span style="color:#c53929">78％ </span>，<span style="color:#c53929">41％ </span>）<span style="color:#c53929">67％ </span>，            HSL （<span style="color:#c53929">127 </span>，<span style="color:#c53929">81％ </span>，<span style="color:#c53929">37％ </span>）<span style="color:#c53929">83％ </span>，            HSL （  
           <span style="color:#3b78e7">rgb</span>(<span style="color:#c53929">229</span>, <span style="color:#c53929">229</span>, <span style="color:#c53929">229</span>) <span style="color:#c53929">1px</span> solid;
        }
        #controls {
          <span style="color:#3b78e7">top</span>: <span style="color:#c53929">10px</span>;
          <span style="color:#3b78e7">left</span>: <span style="color:#c53929">110px</span>;
          <span style="color:#3b78e7">width</span>: <span style="color:#c53929">360px</span>;
          <span style="color:#3b78e7">height</span>: <span style="color:#c53929">45px</span>;
        }
        #data-box {
          <span style="color:#3b78e7">top</span>: <span style="color:#c53929">10px</span>;
          <span style="color:#3b78e7">left</span>: <span style="color:#c53929">500px</span>;
          <span style="color:#3b78e7">height</span>: <span style="color:#c53929">45px</span>;
          <span style="color:#3b78e7">line-height</span>: <span style="color:#c53929">45px</span>;
          <span style="color:#3b78e7">display</span>: none;
        }
        #census-variable {
          <span style="color:#3b78e7">width</span>: <span style="color:#c53929">360px</span>;
          <span style="color:#3b78e7">height</span>: <span style="color:#c53929">20px</span>;
        }
        #legend { <span style="color:#3b78e7">display</span>: flex; <span style="color:#3b78e7">display</span>: -webkit-box; <span style="color:#3b78e7">padding-top</span>: <span style="color:#c53929">7px</span> }
        .color-key {
          <span style="color:#3b78e7">background</span>: linear-gradient(to right,
            hsl(<span style="color:#c53929">5</span>, <span style="color:#c53929">69%</span>, <span style="color:#c53929">54%</span>) <span style="color:#c53929">0%</span>,
            hsl(<span style="color:#c53929">29</span>, <span style="color:#c53929">71%</span>, <span style="color:#c53929">51%</span>) <span style="color:#c53929">17%</span>,
            hsl(<span style="color:#c53929">54</span>, <span style="color:#c53929">74%</span>, <span style="color:#c53929">47%</span>) <span style="color:#c53929">33%</span>,
            hsl(<span style="color:#c53929">78</span>, <span style="color:#c53929">76%</span>, <span style="color:#c53929">44%</span>) <span style="color:#c53929">50%</span>
   
   
<span style="color:#c53929">151 </span>，<span style="color:#c53929">83％ </span>，<span style="color:#c53929">34％ </span>）<span style="color:#c53929">100％</span>）; <span style="color:#3b78e7">弹性</span>：<span style="color:#c53929">1 </span>; <span style="color:#3b78e7">-webkit-box-flex </span>：<span style="color:#c53929">1 </span>; <span style="color:#3b78e7">边距</span>：<span style="color:#c53929">0 </span><span style="color:#c53929">5px </span>; <span style="color:#3b78e7">文字对齐</span>：向左；<span style="color:#3b78e7">字体大小</span>：<span style="color:#c53929">1.0em </span>; <span style="color:#3b78e7">线高</span>：<span style="color:#c53929">1.0em </span>; } ＃data-value { <span style="color:#3b78e7">font-size </span>：<span style="color:#c53929">2.0em </span>; <span style="color:#3b78e7">font-weight </span>：bold } ＃data-label { <span style="color:#3b78e7">font-size </span>：<span style="color:#c53929">2.0em</span>   
           
           
            
          
           
           
        
           
          ; <span style="color:#3b78e7">font-weight </span>：正常；<span style="color:#3b78e7">padding-right </span>：<span style="color:#c53929">10px </span>; } ＃<span style="color:#3b78e7">数据标签</span>：后{ <span style="color:#3b78e7">含量</span>：<span style="color:#0d904f">“：” </span>} ＃数据插入符{ <span style="color:#3b78e7">利润率左</span>：- <span style="color:#c53929">5像素</span>; <span style="color:#0d904f">“ https://storage.googleapis.com/mapsdevsite/json/DP05_0017E” </span><span style="color:#3b78e7">> </span>中位数年龄<span style="color:#3b78e7"></ option> </span><span style="color:#3b78e7"><option </span><span style="color:#9c27b0">value </span>= <span style="color:#0d904f">“ https://storage.googleapis.com/mapsdevsite/json/DP05_0001E” </span><span style="color:#3b78e7">> </span>总人口<span style="color:#3b78e7"></选项> </span><span style="color:#3b78e7"><选项</span><span style="color:#9c27b0">值</span>=    
           
           <span style="color:#3b78e7">display</span>: none; <span style="color:#3b78e7">font-size</span>: <span style="color:#c53929">14px</span>; <span style="color:#3b78e7">width</span>: <span style="color:#c53929">14px</span>}
    <span style="color:#3b78e7"></style></span>
  <span style="color:#3b78e7"></head></span>
  <span style="color:#3b78e7"><body></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"controls"</span> <span style="color:#9c27b0">class</span>=<span style="color:#0d904f">"nicebox"</span><span style="color:#3b78e7">></span>
      <span style="color:#3b78e7"><div></span>
      <span style="color:#3b78e7"><select</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"census-variable"</span><span style="color:#3b78e7">></span>
        <span style="color:#3b78e7"><option</span> <span style="color:#9c27b0">value</span>=<span style="color:#0d904f">"https://storage.googleapis.com/mapsdevsite/json/DP02_0066PE"</span><span style="color:#3b78e7">></span>Percent of population over 25 that completed high
        school<span style="color:#3b78e7"></option></span>
        <span style="color:#3b78e7"><option</span> <span style="color:#9c27b0">value</span>=
         
         <span style="color:#0d904f">“ https://storage.googleapis.com/mapsdevsite/json/DP02_0016E” </span><span style="color:#3b78e7">> </span>家庭平均规模<span style="color:#3b78e7"></ option> </span><span style="color:#3b78e7"><option </span><span style="color:#9c27b0">value </span>= <span style="color:#0d904f">“ https://storage.googleapis.com/mapsdevsite/json/DP03_0088E” </span><span style="color:#3b78e7">> </span>人均收入<span style="color:#3b78e7"></ option> </span><span style="color:#3b78e7"></ select> </span><span style="color:#3b78e7"></ div> </span><span style="color:#3b78e7"><div </span><span style="color:#9c27b0">id </span>= <span style="color:#0d904f">“ legend” </span><span style="color:#3b78e7">> </span><span style="color:#3b78e7"><div </span><span style="color:#9c27b0">id </span>= <span style="color:#0d904f">“ census-min” </span><span style="color:#3b78e7">> </span>min <span style="color:#3b78e7"></ div> </span><span style="color:#3b78e7"><div </span><span style="color:#9c27b0">class </span>mapStyle = [{ <span style="color:#0d904f">' </span>stylers <span style="color:#0d904f">' </span>：[{ <span style="color:#0d904f">'能见度” </span>：<span style="color:#0d904f">“关闭”</span>}] }，{ <span style="color:#0d904f">'featureType' </span>：
         
      
      
       
         
         =<span style="color:#0d904f">"color-key"</span><span style="color:#3b78e7">><span</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"data-caret"</span><span style="color:#3b78e7">></span>&#x25c6;<span style="color:#3b78e7"></span></div></span>
        <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"census-max"</span><span style="color:#3b78e7">></span>max<span style="color:#3b78e7"></div></span>
      <span style="color:#3b78e7"></div></span>
    <span style="color:#3b78e7"></div></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"data-box"</span> <span style="color:#9c27b0">class</span>=<span style="color:#0d904f">"nicebox"</span><span style="color:#3b78e7">></span>
      <span style="color:#3b78e7"><label</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"data-label"</span> <span style="color:#9c27b0">for</span>=<span style="color:#0d904f">"data-value"</span><span style="color:#3b78e7">></label></span>
      <span style="color:#3b78e7"><span</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"data-value"</span><span style="color:#3b78e7">></span></span>
    <span style="color:#3b78e7"></div></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
    <span style="color:#3b78e7"><script></span>
      <span style="color:#3b78e7">var</span> 
          
       
         <span style="color:#0d904f">'landscape' </span>，<span style="color:#0d904f">'elementType' </span>：<span style="color:#0d904f">'geometry' </span>，<span style="color:#0d904f">'stylers' </span>：[{ <span style="color:#0d904f">'visibility' </span>：<span style="color:#0d904f">'on' </span>}，{ <span style="color:#0d904f">'color' </span>：<span style="color:#0d904f">'#fcfcfc' </span>}] }，{ <span style="color:#0d904f">'featureType' </span>：<span style="color:#0d904f">'water' </span>，<span style="color:#0d904f">' elementType' </span>：<span style="color:#0d904f">'geometry' </span>，<span style="color:#0d904f">'stylers' </span>：[{ <span style="color:#0d904f">'visibility' </span>：<span style="color:#0d904f">'on' </span>}，{ <span style="color:#0d904f">'color' </span>：<span style="color:#0d904f">'＃bfd4ff' </span>}] }}}]；<span style="color:#3b78e7">var </span>映射;
         
            
       
         
         
            
      
      
       MAX_VALUE ，人口普查最大值= - <span style="color:#9c27b0">数字</span>。MAX_VALUE ; <span style="color:#3b78e7">函数</span>initMap （）{ <span style="color:#d81b60">//加载地图</span>        map = <span style="color:#3b78e7">new </span>google 。地图。<span style="color:#9c27b0">地图</span>（文件。的getElementById （<span style="color:#0d904f">'地图' </span>），{           中心：{ LAT ：<span style="color:#c53929">40 </span>，LNG ：- <span style="color:#c53929">100 </span>}，          放大：<span style="color:#c53929">4 </span>，          样式：mapStyle 

       

        
  
   
 

        }）; <span style="color:#d81b60">//为google.maps.Data </span>        map <span style="color:#d81b60">设置样式规则和事件</span>。数据。setStyle （styleFeature ）;         地图。数据。addListener （<span style="color:#0d904f">'mouseover' </span>，mouseInToRegion ）;         地图。数据。addListener （<span style="color:#0d904f">'mouseout' </span>，mouseOutOfRegion ）; <span style="color:#d81b60">//连接按钮</span><span style="color:#3b78e7">var </span>selectBox = document 。getElementById （<span style="color:#0d904f">'census-variable' </span>）;         谷歌。


        




        
        
地图。事件。addDomListener （选择框，<span style="color:#0d904f">'改变' </span>，<span style="color:#3b78e7">函数</span>（）{           clearCensusData （）;           loadCensusData （选择框。选项[ 选择框。的selectedIndex ]。值）; }）; <span style="color:#d81b60">//状态多边形只需要加载一次，现在就进行加载</span>        loadMapShapes （）; } <span style="color:#d81b60">/ **从GeoJSON源加载状态边界多边形。</span><span style="color:#d81b60">* / </span><span style="color:#3b78e7">函数</span>loadMapShapes （）{   


        

        


      

      
       
        <span style="color:#d81b60">//从GeoJson文件</span>
        映射<span style="color:#d81b60">加载美国状态轮廓多边形</span>。数据。loadGeoJson （<span style="color:#0d904f">'https://storage.googleapis.com/mapsdevsite/json/states.js' </span>，{ idPropertyName ：<span style="color:#0d904f">'STATE' </span>}）; <span style="color:#d81b60">//通过侦听第一个要</span><span style="color:#d81b60">添加到</span>        google的<span style="color:#d81b60">功能来等待请求完成</span>。地图。事件。addListenerOnce （地图。数据，<span style="color:#0d904f">'addfeature' </span>，<span style="color:#3b78e7">函数</span>（）{           谷歌。地图。事件   

        
        
   
。触发器（文件。的getElementById （<span style="color:#0d904f">'人口普查变量' </span>），<span style="color:#0d904f">'改变' </span>）; }）; } <span style="color:#d81b60">/ ** </span><span style="color:#d81b60">       *将普查数据从模拟的API调用加载到US Census API。</span><span style="color:#d81b60">       * </span><span style="color:#d81b60">       * @param {string}变量</span><span style="color:#d81b60">       * / </span><span style="color:#3b78e7">function </span>loadCensusData （variable ）{ <span style="color:#d81b60">//从人口普查API加载请求的变量（使用本地副本）</span><span style="color:#3b78e7">var </span>xhr = <span style="color:#3b78e7">new </span><span style="color:#9c27b0">XMLHttpRequest </span>（）;         xhr 。打开（<span style="color:#0d904f">'GET' </span>，变量
              
        
      

      




       
        
          
+ <span style="color:#0d904f">'.json' </span>）;         xhr 。onload = <span style="color:#3b78e7">function </span>（）{ <span style="color:#3b78e7">var </span>censusData = JSON 。解析（XHR 。responseText的）;           censusData 。shift （）; <span style="color:#d81b60">//第一行包含列名称</span>          censusData 。forEach （<span style="color:#3b78e7">函数</span>（行）{ <span style="color:#3b78e7">var </span>censusVariable = parseFloat （行[ <span style="color:#c53929">0 </span>]）; <span style="color:#3b78e7">var </span>stateId 
  
          
 
 
            
            = 第[ <span style="color:#c53929">1 </span>] 行；<span style="color:#d81b60">// </span><span style="color:#3b78e7">如果</span>（censusVariable < censusMin ）{               censusMin = censusVariable ; } <span style="color:#3b78e7">if </span>（censusVariable > censusMax ）{               censusMax = censusVariable ; } <span style="color:#d81b60">//用新的数据</span>            映射<span style="color:#d81b60">更新现有行</span>。数据。getFeatureById （stateId ）。setProperty （

            
              

            
              

            

            

              
              <span style="color:#0d904f">'census_variable' </span>，censusVariable ）; }）; <span style="color:#d81b60">//更新并显示图例</span>          文档。getElementById （<span style="color:#0d904f">'census-min' </span>）。textContent =               censusMin 。toLocaleString （）;           文件。getElementById （<span style="color:#0d904f">'census-max' </span>）。textContent =               censusMax 。toLocaleString （）; };         xhr 。发送（）; } <span style="color:#d81b60">/ **从地图上的每个形状中删除人口普查数据并重置UI。</span><span style="color:#d81b60">* /</span>
          

          




        

      

      
      <span style="color:#3b78e7">函数</span>clearCensusData （）{         censusMin = <span style="color:#9c27b0">Number </span>。MAX_VALUE ;         censusMax = - <span style="color:#9c27b0">数字</span>。MAX_VALUE ;         地图。数据。的forEach （<span style="color:#3b78e7">函数</span>（行）{           行。的setProperty （<span style="color:#0d904f">'census_variable' </span>，<span style="color:#3b78e7">未定义</span>）; }）;         文件。getElementById （<span style="color:#0d904f">'data-box' </span>）。风格。显示 
 
 
 
 
        
= <span style="color:#0d904f">'无' </span>;         文件。getElementById （<span style="color:#0d904f">'data-caret' </span>）。风格。显示= <span style="color:#0d904f">'无' </span>; } <span style="color:#d81b60">/ ** </span><span style="color:#d81b60">       *基于'census_variable'列应用渐变样式。</span><span style="color:#d81b60">       *这是传递给data.setStyle（）的回调，并为</span><span style="color:#d81b60">       数据集中的</span><span style="color:#d81b60">每一行调用</span><span style="color:#d81b60">。</span><span style="color:#d81b60">查看有关Data.StylingFunction的文档。</span><span style="color:#d81b60">       * </span><span style="color:#d81b60">       * @param {google.maps.Data.Feature}功能</span><span style="color:#d81b60">       * / </span><span style="color:#3b78e7">function </span>styleFeature （feature ）{ <span style="color:#3b78e7">var </span>low = [ <span style="color:#c53929">5</span> 
 
      

      






       
         ，<span style="color:#c53929">69 </span>，<span style="color:#c53929">54 </span>]; <span style="color:#d81b60">//颜色最小基准的</span><span style="color:#3b78e7">无功</span>高= [ <span style="color:#c53929">151 </span>，<span style="color:#c53929">83 </span>，<span style="color:#c53929">34 </span>]; <span style="color:#d81b60">//最大基准的颜色</span><span style="color:#d81b60">//增量表示其中值坐在min和max之间</span><span style="color:#3b78e7">的VAR </span>增量= （特征。的getProperty （<span style="color:#0d904f">'census_variable' </span>）- censusMin ）/ （censusMax - censusMin ）; <span style="color:#3b78e7">var </span>color = []; <span style="color:#3b78e7">对于</span>（<span style="color:#3b78e7">var </span>i =    
              

        
           
            

         
          <span style="color:#c53929">0 </span>; 我< <span style="color:#c53929">3 </span>; i ++）{ <span style="color:#d81b60">//根据增量</span>          颜色[ i ] = （高[ i ] - 低[ i ]）* 增量+ 低[ i ] <span style="color:#d81b60">来计算整数颜色</span>；} <span style="color:#d81b60">//确定是否显示此形状</span><span style="color:#3b78e7">var </span>showRow = <span style="color:#3b78e7">true </span>; <span style="color:#3b78e7">如果</span>（功能。的getProperty （<span style="color:#0d904f">'census_variable' </span>）==  
          
    
        

        
         
           <span style="color:#3b78e7">空</span>||             isNaN （特征。的getProperty （<span style="color:#0d904f">'census_variable' </span>）））{           showRow = <span style="color:#3b78e7">假</span>; } <span style="color:#3b78e7">var </span>outlineWeight = <span style="color:#c53929">0.5 </span>，zIndex = <span style="color:#c53929">1 </span>；<span style="color:#3b78e7">如果</span>（特征。的getProperty （<span style="color:#0d904f">'州' </span>）=== <span style="color:#0d904f">'悬停' </span>）{           outlineWeight = zIndex的= <span style="color:#c53929">2 </span>; } <span style="color:#3b78e7">return </span>{           strokeWeight ： 
 
 
        

          
            
 
        

         
outlineWeight ，
          strokeColor ：<span style="color:#0d904f">' </span># fff <span style="color:#0d904f">' </span>，          zIndex ：zIndex ，          fillColor ：<span style="color:#0d904f">'hsl（' </span>+ color [ <span style="color:#c53929">0 </span>] + <span style="color:#0d904f">'，' </span>+ color [ <span style="color:#c53929">1 </span>] + <span style="color:#0d904f">'％，' </span>+ color [ <span style="color:#c53929">2 </span>] + <span style="color:#0d904f">'％）' </span>，          fillOpacity ：<span style="color:#c53929">0.75 </span>，          可见：showRow }; } <span style="color:#d81b60">/ ** </span><span style="color:#d81b60">       *响应地图形状（状态）上的mouse-in事件。</span> 

          
 

        
      

      

<span style="color:#d81b60">       * 
       * @param {？google.maps.MouseEvent} e 
       * / </span><span style="color:#3b78e7">function </span>mouseInToRegion （e ）{ <span style="color:#d81b60">//设置悬停状态，以便setStyle函数可以更改边框</span>        e 。功能。setProperty （<span style="color:#0d904f">'state' </span>，<span style="color:#0d904f">'hover' </span>）; <span style="color:#3b78e7">VAR </span>百分比= （Ë 。特征。的getProperty （<span style="color:#0d904f">'census_variable' </span>）- censusMin ）/ （censusMax - censusMin ）* <span style="color:#c53929">100</span>
       
        
 

           
              ; <span style="color:#d81b60">//更新标签</span>        文档。getElementById （<span style="color:#0d904f">'data-label' </span>）。textContent =             e 。功能。getProperty （<span style="color:#0d904f">'NAME' </span>）;         文件。getElementById （<span style="color:#0d904f">'data-value' </span>）。textContent =             e 。功能。getProperty （<span style="color:#0d904f">'census_variable' </span>）。toLocaleString （）;         文件。getElementById （<span style="color:#0d904f">'data-box' </span>）。样式

        




。显示= <span style="color:#0d904f">'块' </span>;         文件。getElementById （<span style="color:#0d904f">'data-caret' </span>）。风格。显示= <span style="color:#0d904f">'块' </span>;         文件。getElementById （<span style="color:#0d904f">'data-caret' </span>）。风格。paddingLeft = 百分比+ <span style="color:#0d904f">'％' </span>; } <span style="color:#d81b60">/ ** </span><span style="color:#d81b60">       *响应地图形状（状态）上的mouse-out事件。</span><span style="color:#d81b60">       * </span><span style="color:#d81b60">       * @param {？google.maps.MouseEvent} e </span><span style="color:#d81b60">       * / </span><span style="color:#3b78e7">函数</span>mouseOutOfRegion （e 
 
 
      

      




      } { <span style="color:#d81b60">//重置悬停状态，将边框恢复为正常</span>        e 。功能。setProperty （<span style="color:#0d904f">'state' </span>，<span style="color:#0d904f">'normal' </span>）; } <span style="color:#3b78e7"></ script> </span><span style="color:#3b78e7"><script </span><span style="color:#9c27b0">异步</span><span style="color:#9c27b0">延迟</span><span style="color:#9c27b0">src </span>= <span style="color:#0d904f">“ https://maps.googleapis.com/maps/api/js?key=</span> 
        
 
      

    
      
        YOUR_API_KEY<span style="color:#0d904f">＆callback = initMap“ </span><span style="color:#3b78e7">> </span><span style="color:#3b78e7"></ script> </span><span style="color:#3b78e7"></ body> </span><span style="color:#3b78e7"></ html></span>
    
  

</span>

入门

您可以通过使用本教程中的代码来开发自己的该Choropleth映射的版本。要开始执行此操作，请在文本编辑器中创建一个新文件，并将其另存为index.html。

阅读以下各节，以了解可以添加到此文件中的代码。

创建基本地图

本节说明设置基本地图的代码。这可能类似于您使用Maps JavaScript API时创建地图的方式。

将以下代码复制到您的index.html文件中。此代码会加载Maps JavaScript API，并使地图全屏显示。

<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
  <span style="color:#3b78e7"><head></span>
  <span style="color:#3b78e7"><meta</span> <span style="color:#9c27b0">charset</span>=<span style="color:#0d904f">"utf-8"</span><span style="color:#3b78e7">></span>
      <span style="color:#3b78e7"><meta</span> <span style="color:#9c27b0">name</span>=<span style="color:#0d904f">"viewport"</span> <span style="color:#9c27b0">content</span>=<span style="color:#0d904f">"initial-scale=1.0, user-scalable=no"</span> <span style="color:#3b78e7">/></span>
      <span style="color:#3b78e7"><title></span>Mashups with google.maps.Data<span style="color:#3b78e7"></title></span>
      <span style="color:#3b78e7"><style></span>
        #map {
          <span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;
        }
        <span style="color:#d81b60">/* Optional: Makes the sample page fill the window. */</span>
        html, body {
          <span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;
          <span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span>;
          <span style="color:#3b78e7">padding</span>: <span style="color:#c53929">0</span>;
        }
      <span style="color:#3b78e7"></style></span>
  <span style="color:#3b78e7"></head></span>
  <span style="color:#3b78e7"><body></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
    <span style="color:#3b78e7"><script></span>
      <span style="color:#3b78e7">function</span> initMap() {

        <span style="color:#d81b60">// load the map</span>
        map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {
          center: {lat: <span style="color:#c53929">40</span>, lng: -<span style="color:#c53929">100</span>},
          zoom: <span style="color:#c53929">4</span>,
          styles: mapStyle
        });

        <span style="color:#3b78e7">var</span> mapStyle = [{
          <span style="color:#0d904f">'featureType'</span>: <span style="color:#0d904f">'all'</span>,
          <span style="color:#0d904f">'elementType'</span>: <span style="color:#0d904f">'all'</span>,
          <span style="color:#0d904f">'stylers'</span>: [{<span style="color:#0d904f">'visibility'</span>: <span style="color:#0d904f">'off'</span>}]
        }, {
          <span style="color:#0d904f">'featureType'</span>: <span style="color:#0d904f">'landscape'</span>,
          <span style="color:#0d904f">'elementType'</span>: <span style="color:#0d904f">'geometry'</span>,
          <span style="color:#0d904f">'stylers'</span>: [{<span style="color:#0d904f">'visibility'</span>: <span style="color:#0d904f">'on'</span>}, {<span style="color:#0d904f">'color'</span>: <span style="color:#0d904f">'#fcfcfc'</span>}]
        }, {
          <span style="color:#0d904f">'featureType'</span>: <span style="color:#0d904f">'water'</span>,
          <span style="color:#0d904f">'elementType'</span>: <span style="color:#0d904f">'labels'</span>,
          <span style="color:#0d904f">'stylers'</span>: [{<span style="color:#0d904f">'visibility'</span>: <span style="color:#0d904f">'off'</span>}]
        }, {
          <span style="color:#0d904f">'featureType'</span>: <span style="color:#0d904f">'water'</span>,
          <span style="color:#0d904f">'elementType'</span>: <span style="color:#0d904f">'geometry'</span>,
          <span style="color:#0d904f">'stylers'</span>: [{<span style="color:#0d904f">'visibility'</span>: <span style="color:#0d904f">'on'</span>}, {<span style="color:#0d904f">'hue'</span>: <span style="color:#0d904f">'#5f94ff'</span>}, {<span style="color:#0d904f">'lightness'</span>: <span style="color:#c53929">60</span>}]
        }];
      }

    <span style="color:#3b78e7"></script></span>
    <span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
        <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"></script></span>
  <span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span>
</span>

第一个脚本标签内的代码是通过创建一个称为initMapmap 的函数来运行程序的起点，该函数会初始化地图对象。

上面代码中的样式器关闭了featureTypes地图上所有道路，景点，风景区，行政区域及其所有位置的可见性 elementTypes。对于所有可用值的列表 featureType，并elementType请参阅 JSON样式的引用。

单击YOUR_API_KEY代码示例，或按照说明获取API密钥。替换YOUR_API_KEY为应用程序的API密钥。完全加载API后，下面的script标记中的callback参数将执行initMap()HTML文件中的功能。

<span style="color:#37474f"><span style="color:#3b78e7"><script></span> async defer
    src=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span>
<span style="color:#3b78e7"></script></span>
</span>

创建和设置地图控件的样式

下面的代码在地图上创建以下控件：

带有下拉菜单的控件，具有5个不同的数据选项。
地图图例。
悬停在多边形上时显示的状态特定数据的数据框。

<span style="color:#37474f"><span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"controls"</span> <span style="color:#9c27b0">class</span>=<span style="color:#0d904f">"nicebox"</span><span style="color:#3b78e7">></span>
  <span style="color:#3b78e7"><div></span>
  <span style="color:#3b78e7"><select</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"census-variable"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"><option</span> <span style="color:#9c27b0">value</span>=<span style="color:#0d904f">"https://storage.googleapis.com/mapsdevsite/json/DP02_0066PE"</span><span style="color:#3b78e7">></span>Percent of population over 25 that completed high
    school<span style="color:#3b78e7"></option></span>
    <span style="color:#3b78e7"><option</span> <span style="color:#9c27b0">value</span>=<span style="color:#0d904f">"https://storage.googleapis.com/mapsdevsite/json/DP05_0017E"</span><span style="color:#3b78e7">></span>Median age<span style="color:#3b78e7"></option></span>
    <span style="color:#3b78e7"><option</span> <span style="color:#9c27b0">value</span>=<span style="color:#0d904f">"https://storage.googleapis.com/mapsdevsite/json/DP05_0001E"</span><span style="color:#3b78e7">></span>Total population<span style="color:#3b78e7"></option></span>
    <span style="color:#3b78e7"><option</span> <span style="color:#9c27b0">value</span>=<span style="color:#0d904f">"https://storage.googleapis.com/mapsdevsite/json/DP02_0016E"</span><span style="color:#3b78e7">></span>Average family size<span style="color:#3b78e7"></option></span>
    <span style="color:#3b78e7"><option</span> <span style="color:#9c27b0">value</span>=<span style="color:#0d904f">"https://storage.googleapis.com/mapsdevsite/json/DP03_0088E"</span><span style="color:#3b78e7">></span>Per-capita income<span style="color:#3b78e7"></option></span>
  <span style="color:#3b78e7"></select></span>
  <span style="color:#3b78e7"></div></span>
  <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"legend"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"census-min"</span><span style="color:#3b78e7">></span>min<span style="color:#3b78e7"></div></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">class</span>=<span style="color:#0d904f">"color-key"</span><span style="color:#3b78e7">><span</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"data-caret"</span><span style="color:#3b78e7">></span>◆<span style="color:#3b78e7"></span></div></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"census-max"</span><span style="color:#3b78e7">></span>max<span style="color:#3b78e7"></div></span>
  <span style="color:#3b78e7"></div></span>
<span style="color:#3b78e7"></div></span>
<span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"data-box"</span> <span style="color:#9c27b0">class</span>=<span style="color:#0d904f">"nicebox"</span><span style="color:#3b78e7">></span>
  <span style="color:#3b78e7"><label</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"data-label"</span> <span style="color:#9c27b0">for</span>=<span style="color:#0d904f">"data-value"</span><span style="color:#3b78e7">></label></span>
  <span style="color:#3b78e7"><span</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"data-value"</span><span style="color:#3b78e7">></span></span>
<span style="color:#3b78e7"></div></span>
</span>

使用style标签内的以下代码来设置地图控件的样式。

<span style="color:#37474f"><span style="color:#3b78e7"><style></span>
  html, body, #map { <span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>; <span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span>; <span style="color:#3b78e7">padding</span>: <span style="color:#c53929">0</span>; <span style="color:#3b78e7">overflow</span>: hidden; }
    .nicebox {
      <span style="color:#3b78e7">position</span>: absolute;
      <span style="color:#3b78e7">text-align</span>: center;
      <span style="color:#3b78e7">font-family</span>: <span style="color:#0d904f">"Roboto"</span>, <span style="color:#0d904f">"Arial"</span>, sans-serif;
      <span style="color:#3b78e7">font-size</span>: <span style="color:#c53929">13px</span>;
      <span style="color:#3b78e7">z-index</span>: <span style="color:#c53929">5</span>;
      <span style="color:#3b78e7">box-shadow</span>: <span style="color:#c53929">0</span> <span style="color:#c53929">4px</span> <span style="color:#c53929">6px</span> -<span style="color:#c53929">4px</span> <span style="color:#c53929">#333</span>;
      <span style="color:#3b78e7">padding</span>: <span style="color:#c53929">5px</span> <span style="color:#c53929">10px</span>;
      <span style="color:#3b78e7">background</span>: <span style="color:#3b78e7">rgb</span>(<span style="color:#c53929">255</span>,<span style="color:#c53929">255</span>,<span style="color:#c53929">255</span>);
      <span style="color:#3b78e7">background</span>: linear-gradient(to bottom,rgba(<span style="color:#c53929">255</span>,<span style="color:#c53929">255</span>,<span style="color:#c53929">255</span>,<span style="color:#c53929">1</span>) <span style="color:#c53929">0%</span>,rgba(<span style="color:#c53929">245</span>,<span style="color:#c53929">245</span>,<span style="color:#c53929">245</span>,<span style="color:#c53929">1</span>) <span style="color:#c53929">100%</span>);
      <span style="color:#3b78e7">border</span>: <span style="color:#3b78e7">rgb</span>(<span style="color:#c53929">229</span>, <span style="color:#c53929">229</span>, <span style="color:#c53929">229</span>) <span style="color:#c53929">1px</span> solid;
    }
    #controls {
      <span style="color:#3b78e7">top</span>: <span style="color:#c53929">10px</span>;
      <span style="color:#3b78e7">left</span>: <span style="color:#c53929">110px</span>;
      <span style="color:#3b78e7">width</span>: <span style="color:#c53929">360px</span>;
      <span style="color:#3b78e7">height</span>: <span style="color:#c53929">45px</span>;
    }
    #data-box {
      <span style="color:#3b78e7">top</span>: <span style="color:#c53929">10px</span>;
      <span style="color:#3b78e7">left</span>: <span style="color:#c53929">500px</span>;
      <span style="color:#3b78e7">height</span>: <span style="color:#c53929">45px</span>;
      <span style="color:#3b78e7">line-height</span>: <span style="color:#c53929">45px</span>;
      <span style="color:#3b78e7">display</span>: none;
    }
    #census-variable {
      <span style="color:#3b78e7">width</span>: <span style="color:#c53929">360px</span>;
      <span style="color:#3b78e7">height</span>: <span style="color:#c53929">20px</span>;
    }
    #legend { <span style="color:#3b78e7">display</span>: flex; <span style="color:#3b78e7">display</span>: -webkit-box; <span style="color:#3b78e7">padding-top</span>: <span style="color:#c53929">7px</span> }
    .color-key {
      <span style="color:#3b78e7">background</span>: linear-gradient(to right,
        hsl(<span style="color:#c53929">5</span>, <span style="color:#c53929">69%</span>, <span style="color:#c53929">54%</span>) <span style="color:#c53929">0%</span>,
        hsl(<span style="color:#c53929">29</span>, <span style="color:#c53929">71%</span>, <span style="color:#c53929">51%</span>) <span style="color:#c53929">17%</span>,
        hsl(<span style="color:#c53929">54</span>, <span style="color:#c53929">74%</span>, <span style="color:#c53929">47%</span>) <span style="color:#c53929">33%</span>,
        hsl(<span style="color:#c53929">78</span>, <span style="color:#c53929">76%</span>, <span style="color:#c53929">44%</span>) <span style="color:#c53929">50%</span>,
        hsl(<span style="color:#c53929">102</span>, <span style="color:#c53929">78%</span>, <span style="color:#c53929">41%</span>) <span style="color:#c53929">67%</span>,
        hsl(<span style="color:#c53929">127</span>, <span style="color:#c53929">81%</span>, <span style="color:#c53929">37%</span>) <span style="color:#c53929">83%</span>,
        hsl(<span style="color:#c53929">151</span>, <span style="color:#c53929">83%</span>, <span style="color:#c53929">34%</span>) <span style="color:#c53929">100%</span>);
      <span style="color:#3b78e7">flex</span>: <span style="color:#c53929">1</span>;
      <span style="color:#3b78e7">-webkit-box-flex</span>: <span style="color:#c53929">1</span>;
      <span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span> <span style="color:#c53929">5px</span>;
      <span style="color:#3b78e7">text-align</span>: left;
      <span style="color:#3b78e7">font-size</span>: <span style="color:#c53929">1.0em</span>;
      <span style="color:#3b78e7">line-height</span>: <span style="color:#c53929">1.0em</span>;
    }
    #data-value { <span style="color:#3b78e7">font-size</span>: <span style="color:#c53929">2.0em</span>; <span style="color:#3b78e7">font-weight</span>: bold }
    #data-label { <span style="color:#3b78e7">font-size</span>: <span style="color:#c53929">2.0em</span>; <span style="color:#3b78e7">font-weight</span>: normal; <span style="color:#3b78e7">padding-right</span>: <span style="color:#c53929">10px</span>; }
    #<span style="color:#3b78e7">data-label</span>:after { <span style="color:#3b78e7">content</span>: <span style="color:#0d904f">':'</span> }
    #data-caret { <span style="color:#3b78e7">margin-left</span>: -<span style="color:#c53929">5px</span>; <span style="color:#3b78e7">display</span>: none; <span style="color:#3b78e7">font-size</span>: <span style="color:#c53929">14px</span>; <span style="color:#3b78e7">width</span>: <span style="color:#c53929">14px</span>}
<span style="color:#3b78e7"></style></span>
</span>

Importing data from the US Census API

下面的代码向美国人口普查局查询美国所有州的最新人口普查数据，它们以JSON格式接收。

function loadCensusData(variable) {
// load the requested variable from the census API
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.census.gov/data/2012/acs5/profile?get=' +
  variable + '&for=state:*&key=YOUR_API_KEY');
        xhr.onload = function() {
          var censusData = JSON.parse(xhr.responseText);
          censusData.shift(); // the first row contains column names
          censusData.forEach(function(row) {
            var censusVariable = parseFloat(row[0]);
            var stateId = row[1];

            // keep track of min and max values
            if (censusVariable < censusMin) {
              censusMin = censusVariable;
            }
            if (censusVariable > censusMax) {
              censusMax = censusVariable;
            }

            // update the existing row with the new data
            map.data
              .getFeatureById(stateId)
              .setProperty('census_variable', censusVariable);
          });

          // update and display the legend
          document.getElementById('census-min').textContent =
              censusMin.toLocaleString();
          document.getElementById('census-max').textContent =
              censusMax.toLocaleString();
        };
        xhr.send();
}

样式化数据

下面的代码基于普查数据值，通过对数据集中的每个多边形应用渐变来创建Choropleth贴图。您可以使用Data.StyleOptions 对象或返回Data.StyleOptions对象的函数设置数据样式。

// set up the style rules and events for google.maps.Data
map.data.setStyle(styleFeature);

      function styleFeature(feature) {
        var low = [5, 69, 54];  // color of smallest datum
        var high = [151, 83, 34];   // color of largest datum

        // delta represents where the value sits between the min and max
        var delta = (feature.getProperty('census_variable') - censusMin) /
            (censusMax - censusMin);

        var color = [];
        for (var i = 0; i < 3; i++) {
          // calculate an integer color based on the delta
          color[i] = (high[i] - low[i]) * delta + low[i];
        }

        // determine whether to show this shape or not
        var showRow = true;
        if (feature.getProperty('census_variable') == null ||
            isNaN(feature.getProperty('census_variable'))) {
          showRow = false;
        }

        var outlineWeight = 0.5, zIndex = 1;
        if (feature.getProperty('state') === 'hover') {
          outlineWeight = zIndex = 2;
        }

        return {
          strokeWeight: outlineWeight,
          strokeColor: '#fff',
          zIndex: zIndex,
          fillColor: 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)',
          fillOpacity: 0.75,
          visible: showRow
        };
      }

除了为多边形着色之外，下面的代码还通过添加响应鼠标活动的事件来创建交互式元素。将鼠标悬停在多边形上会突出显示状态边框，并同时更新地图上的数据框控件。

// set up the style rules and events for google.maps.Data
map.data.addListener('mouseover', mouseInToRegion);
map.data.addListener('mouseout', mouseOutOfRegion);

      /**
       * Responds to the mouse-in event on a map shape (state).
       *
       * @param {?google.maps.MouseEvent} e
       */
      function mouseInToRegion(e) {
        // set the hover state so the setStyle function can change the border
        e.feature.setProperty('state', 'hover');

        var percent = (e.feature.getProperty('census_variable') - censusMin) /
            (censusMax - censusMin) * 100;

        // update the label
        document.getElementById('data-label').textContent =
            e.feature.getProperty('NAME');
        document.getElementById('data-value').textContent =
            e.feature.getProperty('census_variable').toLocaleString();
        document.getElementById('data-box').style.display = 'block';
        document.getElementById('data-caret').style.display = 'block';
        document.getElementById('data-caret').style.paddingLeft = percent + '%';
      }

      /**
       * Responds to the mouse-out event on a map shape (state).
       *
       * @param {?google.maps.MouseEvent} e
       */
      function mouseOutOfRegion(e) {
        // reset the hover state, returning the border to normal
        e.feature.setProperty('state', 'normal');
      }

加载状态边界多边形

在整个initMap功能之后添加以下代码。该loadMapShapes 函数使用loadGeoJson方法从GeoJSON文件加载美国州边界的多边形。

/** Loads the state boundary polygons from a GeoJSON source. */
function loadMapShapes() {
  // load US state outline polygons from a GeoJSON file
  map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/states.js', { idPropertyName: 'STATE' });

将下面的行添加到initMap函数的末尾。

  //状态多边形只需要加载一次，现在就进行加载
  loadMapShapes （）;

从地图控件下拉菜单中选择数据源选项后，地图会在美国人口普查数据API中查询指定的变量。为了将人口普查数据与形状数据连接起来，代码将idPropertyName “状态” 设置为“状态”，这是人口普查数据和GeoJson属性中的通用键。

lwbsleep

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6、谷歌地图官方API-组合和可视化多个数据源

组合和可视化多个数据源总览本教程向您展示如何在Google地图上显示来自多个来源的数据。例如，下面的choropleth映射使用两个不同的来源来突出显示美国的各个州，并显示特定于州的数据。该地图使用来自GeoJSON文件的数据来显示定义美国州边界的多边形。它还可以在地图上显示与每个州相对应的数据，这些数据来自对美国人口普查API的模拟查询。从控件下拉菜单中选择数据类别，以更新地图...
复制链接

扫一扫

专栏目录