使用Google Maps JavaScript API的輪廓和陰影區域

Google Maps Web應用程序以非常好的方式對區域區域進行地理編碼和輪廓。這可能是通過Google Maps JavaScript API實現的嗎？該網站的一個例子：使用Google Maps JavaScript API的輪廓和陰影區域

https://maps.google.se/maps?q=sk%C3%A5ne&hl=sv&ie=UTF8&ll=57.1422,13.337402&spn=5.468408,16.907959&sll=39.290385,-76.612189&sspn=0.243658,0.528374&hnear=Sk%C3%A5ne+l%C3%A4n&t=m&z=7

這是斯科訥的瑞典縣。 Google Maps Web應用程序將其以紅色概括爲粉紅色。我想用Google Maps JavaScript API對此類地區進行地理編碼和顯示。怎麼樣？

來源

2013-03-03 Björn3

據我所知，界限功能尚未從Google Map API v3中提供。

您需要知道邊界以塑造多邊形。 Geocoder返回的信息給定的地址不足以形成邊界。您可能會看到返回的信息here。

斯德哥爾摩界限是：'17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139,59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916|18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722,60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395'

總之難的是找到你想獲得繪製在地圖上的城市邊界。我不確定是否有提供這些邊界的免費服務。檢查此Stackoverflow question以獲取有關提供邊界的網站的更多信息。

在下面的示例中，當您單擊繪製斯德哥爾摩按鈕時，斯德哥爾摩在地圖上繪製。

<html> 
 
     
 
     <head> 
 
      
 
      <head> 
 
       <title>Area calculator - Outline a property on a google map and find its area</title> 
 
       <title>Google Maps</title> 
 
       <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
 
       <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> 
 
        
 
       </script> 
 
       <script type="text/javascript"> 
 
        var map, 
 
        geocoder, 
 
        addressMarker, 
 
        mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278); 
 
    
 
        function initialize() { 
 
         map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
          zoom: 7, 
 
          center: mapCenter, 
 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
 
         }); 
 
         geocoder = new google.maps.Geocoder(); 
 
        } 
 
    
 
        function showAddress() { 
 
         var address = $('#to').val(); 
 
         geocoder.geocode({ 
 
          'address': address 
 
         }, function (results, status) { 
 
          if (status == google.maps.GeocoderStatus.OK) { 
 
           map.setCenter(results[0].geometry.location); 
 
           var marker = new google.maps.Marker({ 
 
            map: map, 
 
            position: results[0].geometry.location 
 
           }); 
 
          } else { 
 
           alert("Geocode was not successful for the following reason: " + status); 
 
          } 
 
         }); 
 
        } 
 
    
 
    \t \t \t \t function drawPolygon() { 
 
    \t \t \t \t 
 
    \t \t \t \t // stockholm boundaries 
 
    \t \t \t \t \t var boundaries = '17.73966,59.66395|17.75651,59.61827|17.81771,59.58645|17.84347,59.53069|17.78465,59.49340|17.78277,59.38916|17.83277,59.36500|17.93215,59.33652|18.00736,59.34496|18.09139,59.33444|18.05722,59.39139|18.12000,59.45388|18.19508,59.45012|18.16562,59.41083|18.32826,59.39795|18.28659,59.41228|18.25945,59.44638|18.31722,59.47361|18.37333,59.46694|18.66638,59.59138|18.69979,59.64409|18.74555,59.68916|18.84139,59.71249|18.98569,59.71666|19.03222,59.71999|19.07965,59.76743|18.93472,59.78361|18.86472,59.79804|18.96922,59.86561|19.06545,59.83250|19.07056,59.88972|19.00722,59.91277|18.92972,59.92472|18.89000,59.95805|18.81722,60.07548|18.77666,60.11084|18.71139,60.12806|18.63277,60.14500|18.50743,60.15265|18.44805,59.99249|18.37334,59.86500|18.29055,59.83527|18.15472,59.79556|18.08111,59.74014|17.96055,59.70472|17.89694,59.68916|17.73966,59.66395'; 
 
        
 
         var latLngArray = boundaries.split('|'); 
 
         var points = []; 
 
         for (var i = 0; i < latLngArray.length; i++) { 
 
          pos = latLngArray[i].split(','); 
 
          points.push(new google.maps.LatLng(parseFloat(pos[1]), parseFloat(pos[0]))); 
 
         } 
 
    
 
         var shape = new google.maps.Polygon({ 
 
          paths: points, 
 
          strokeColor: '#ff0000', 
 
          strokeOpacity: 0.8, 
 
          strokeWeight: 2, 
 
          fillColor: '#ff0000', 
 
          fillOpacity: 0.35 
 
         }); 
 
    
 
         shape.setMap(map); 
 
        } 
 
    
 
    
 
        $(document).ready(function() { 
 
         initialize(); 
 
        }); 
 
    
 
        $(document).on('click', '.show-address', function (e) { 
 
         e.preventDefault(); 
 
         showAddress(); 
 
        }); 
 
    \t \t \t \t 
 
    \t \t \t \t $(document).on('click', '.draw-address', function (e) { 
 
         e.preventDefault(); 
 
         drawPolygon(); 
 
        }); 
 
       </script> 
 
      </head> 
 
      
 
      <body> 
 
       <div id="basic-map"> 
 
        <div id="map_canvas" style="height:150px;"></div> 
 
        <label for="to">Address</label> 
 
        <input type="text" id="to" value="Stockholm, Sweden" /> 
 
        <a href="#" class="show-address">Show Address</a> 
 
    \t \t \t \t <a href="#" class="draw-address">Draw Stockholm</a> 
 
       </div> 
 
      </body> 
 
    
 
    </html>

我希望這有助於。

來源

2013-03-03 12:28:54

謝謝你的回答。也許你是對的，沒有辦法從api中獲得當前區域輸出的geoencoded coords。儘管我們可以在我的示例鏈接中看到數據存在並可以共享，但它很糟糕。對於搜索該信息的人來說，城市很容易，可以通過地理編碼API進行檢索。 – 2013-03-03 16:43:34

夥計們，對此有任何更新。現在是2015年，我仍在尋找解決方案。在此先感謝 – theChinmay 2015-01-25 19:00:23

使用Google Maps JavaScript API的輪廓和陰影區域

回答

相關問題