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确定点是否位于多边形内部，如下所示

＆＃13;

/**
 * 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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Codepen

Answer 2

您无法访问使用KmlLayer显示的KML文件中的多边形数据，您需要将多边形创建为本机Google Maps Javascript API v3 Polygon。您可以使用第三方KML解析器执行此操作，例如geoxml3或geoxml-v3。

example using geoxml3 with your KML

指向针对lat和lng值的多边形检查

2 个答案: