点对多维数据集检查纬度和经度值

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