點對多維數據集檢查緯度和經度值

Question

我想查看錶單提供的緯度和經度座標是否在多邊形內，然後提醒用戶兩個實例。

到目前爲止，這裏是我的代碼。我已經做了一些研究，據說您可以使用光線投射，或者您可以使用Google Maps API提供的containsLocation（）來執行此操作。但我無法弄清楚如何使用它來實現。

這裏是一個演示http://codepen.io/simonfricker/pen/qbxOxy

HTML

<input id="location" placeholder="" type="text" class="form-control" autocomplete="off"> 
<div id="map"></div> 

JS

var option = { 
     types: ['(cities)'], 
    // country: 'GB' 
    }; 
    var latco, lngco; 

$("#location").geocomplete(option).bind("geocode:result", function(event, result) { 
     latco = result.geometry.location.lat() 
     lngco = result.geometry.location.lng() 

     console.log(result.geometry.location.lng()); 
     console.log(result.geometry.location.lat()); 
    }); 

var map; 
var src = 'http://kml-samples.googlecode.com/svn/trunk/kml/Region/polygon-simple.kml'; 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: new google.maps.LatLng(-19.257753, 146.823688), 
    zoom: 2, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
    loadKmlLayer(src, map); 
} 


function loadKmlLayer(src, map) { 
    var kmlLayer = new google.maps.KmlLayer(src, { 
    suppressInfoWindows: true, 
    preserveViewport: false, 
    map: map 
    }); 
    google.maps.event.addListener(kmlLayer, 'click', function(event) { 
    var content = event.featureData.infoWindowHtml; 
    var testimonial = document.getElementById('capture'); 
    testimonial.innerHTML = content; 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

由於google.maps.KmlLayer不公開任何屬性或方法讓你可以考慮以下解決方案在地圖上的形狀：

• 轉換KML文件到GeoJSON的格式，例如使用this online converter（converted file ）
• 利用GeoJSON文件在地圖上顯示數據圖層，然後使用Google Maps Data API您可以確定點是否位於多邊形內或不在顯示內流

/** 
 
* Initializes the map and calls the function that creates polylines. 
 
*/ 
 
function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map_div'), { 
 
     center: new google.maps.LatLng(-34.93, 138.64), 
 
     zoom: 12, 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }); 
 

 
    initGeocompleteControl(map,function (result) { 
 
     map.data.forEach(function(f) { 
 

 
      var bounds = new google.maps.LatLngBounds(); 
 
      calcBounds(f.getGeometry(),bounds); 
 

 
      if (bounds.contains(result.geometry.location)) { 
 
       $("#result").html('Location is found'); 
 
      } else { 
 
       $("#result").html('Location is not found'); 
 
      } 
 

 
     }); 
 
    }); 
 

 
    map.data.loadGeoJson('https://gist.githubusercontent.com/vgrem/741d25378f5ab8a19b0b/raw/aef3ce18474db7a3482349f2a52cbd9d71caebc3/polygon-simple.json'); 
 
    
 
} 
 

 
function initGeocompleteControl(map,complete) { 
 
    var option = { 
 
     types: ['(cities)'] 
 
     // country: 'GB' 
 
    }; 
 
    $("#location").geocomplete(option).bind("geocode:result", function (event, result) { 
 
     complete(result); 
 
    }); 
 
} 
 

 

 
function calcBounds(geometry,bounds) { 
 
    if (geometry instanceof google.maps.LatLng) { 
 
     bounds.extend(geometry); 
 
    } 
 
    else if (geometry instanceof google.maps.Data.Point) { 
 
     bounds.extend(geometry.get()); 
 
    } 
 
    else { 
 
     geometry.getArray().forEach(function (g) { 
 
      calcBounds(g,bounds); 
 
     }); 
 
    } 
 
} 
 

 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map_div { 
 
    height: 100%; 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.6.5/jquery.geocomplete.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="location_container"class="jumbotron"> 
 
    <div class="container"> 
 
     <input id="location" placeholder="" type="text" class="form-control" autocomplete="off"> 
 
     <div id="result"></div> 
 
    </div> 
 
</div> 
 
<div id="map_div"></div>

Codepen

Answer 2

不能使用KmlLayer顯示的訪問KML文件多邊形數據，需要將該多邊形創建爲本地Google Maps JavaScript API v3 Polyg上。您可以使用第三方KML解析器（如geoxml3或geoxml-v3）來完成此操作。

example using geoxml3 with your KML