指向多邊形以檢查經緯度值

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格式，例如使用此在線轉換器 （ 轉換后的文件 ）
• 利用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面。 您可以使用第三方KML解析器（例如geoxml3或geoxml-v3）來實現 。

在您的KML中使用geoxml3的示例