2017-08-05 9 views
0

指定されたpoiontがRectangleの内側にあるかどうかを確認してください。そうでない場合はtrueを返し、そうでない場合はfalseを返します。 は私がJavascript google mapsに矩形の点が含まれています

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 



     #floating-panel { 
     position: absolute; 
     top: 4px; 
     left: 9%; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     text-align: center; 
     font-family: 'Roboto','sans-serif'; 
     line-height: 30px; 
     padding-left: 10px; 
     } 

    </style> 
    </head> 
    <body> 


    <div id="floating-panel"> 
     <input id="address" type="textbox" value="enter address"> 
     <input id="submit" type="button" value="Geocode"> 
     <input id="output" type="textbox" value="output"> 
    </div> 



    <div id="map"></div> 

    <script> 
     var map; 
     //-----This example adds a user-editable rectangle to the map. 
     function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 45.065140, lng: 19.946804}, 
      zoom: 12 
     }); 

     /*------for geocoding(I give addres not lng lang)*/ 
     var geocoder = new google.maps.Geocoder(); 

     document.getElementById('submit').addEventListener('click', function() { 
      geocodeAddress(geocoder, map); 
     }); 
     /* ------------- */ 

     var bounds = { 
      north: 45.095140, 
      south: 45.025140, 
      east: 19.966804, 
      west: 19.926804 
     }; 
     // Define a rectangle and set its editable property to true. 
     var rectangle = new google.maps.Rectangle({ 
      bounds: bounds, 
      editable: true, 
      draggable: true, 
      geodesic: true 
     }); 
     rectangle.setMap(map); 

      document.getElementById("output").value = check_is_in_or_out(marker); 


     } 


     function check_is_in_or_out(marker){ 
     google.maps.event.addListener(map, 'bounds_changed', function() { 
     var bounds = map.getBounds().contains(marker.getPosition()); 
     }); 
    return bounds; 
} 
     /* ------------- */ 
     /*------for geocoding(I give addres not lng lang)*/ 
     var address; 
     var latitude; 
     var longitude; 
     var marker; 
     function geocodeAddress(geocoder, resultsMap) { 
     address = document.getElementById('address').value; 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status === 'OK') { 
      resultsMap.setCenter(results[0].geometry.location); 
      latitude = results[0].geometry.location.lat(); 
      longitude = results[0].geometry.location.lng(); 
      marker = new google.maps.Marker({ 
       map: resultsMap, 
       position: results[0].geometry.location 
      }); 
      } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      } 
     return marker; 
     }); 


     } 
     /* ------------- */ 
    </script> 
    <script src="http://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" 
    async defer></script> 
    </body> 
</html> 

私のコード map.htmlを持っていると私は与えられた点が内部であるかfalseので 外の場合を取得し、私はこれをどのように行うことができれば、私の出力trueで取得したいですか?ノエは、何も私が使用したときに起こっていない:document.getElementById("output").value = check_is_in_or_out(marker); * API_KEYあなたはこの代わりにないAPIキーを使用している場合: おかげであなたの助けgeocodezip http://maps.google.com/maps/api/js?sensor=false

EDIT。今、私のコードは次のとおりです。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Map2</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 



     #floating-panel { 
     position: absolute; 
     top: 4px; 
     left: 9%; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     text-align: center; 
     font-family: 'Roboto','sans-serif'; 
     line-height: 30px; 
     padding-left: 10px; 
     } 

    </style> 
    </head> 
    <body> 


    <div id="floating-panel"> 
     <input id="address" type="textbox" value="Dobrodol"> 
     <input id="submit" type="button" value="Geocode"> 
     <input id="output" type="textbox" value="output"> 
    </div> 



    <div id="map"></div> 

    <script> 
    function check_is_in_or_out(marker) { 
    var insideRectangle = false; 
    if (rectangle && rectangle.getBounds && marker && marker.getPosition()) 
    insideRectangle = rectangle.getBounds().contains(marker.getPosition()); 

    return insideRectangle; 
} 

var map; 
var rectangle; 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: { 
     lat: 45.065140, 
     lng: 19.946804 
    }, 
    zoom: 12 
    }); 

    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
    geocodeAddress(geocoder, map); 
    }); 
    var bounds = { 
    north: 45.095140, 
    south: 45.025140, 
    east: 19.966804, 
    west: 19.926804 
    }; 
    // Define a rectangle and set its editable property to true. 
    rectangle = new google.maps.Rectangle({ 
    bounds: bounds, 
    editable: true, 
    draggable: true, 
    geodesic: true 
    }); 
    rectangle.setMap(map); 


} 
var address; 
var latitude; 
var longitude; 
var marker; 

function geocodeAddress(geocoder, resultsMap) { 
    address = document.getElementById('address').value; 
    geocoder.geocode({ 
    'address': address 
    }, function(results, status) { 
    if (status === 'OK') { 
     resultsMap.setCenter(results[0].geometry.location); 
     latitude = results[0].geometry.location.lat(); 
     longitude = results[0].geometry.location.lng(); 
     marker = new google.maps.Marker({ 
     map: resultsMap, 
     position: results[0].geometry.location 
     }); 
     document.getElementById("output").value = check_is_in_or_out(marker); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 
    </script> 
    <script src="http://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" 
    async defer></script> 
    </body> 
</html> 

をそして、我々がdocument.getElementById("output").value = check_is_in_or_out(marker);とtrueまたはfalseに私のてtextBox変更を使用geocodeAddress(geocoder, resultsMap)で結構です。しかし、私はこの値をvarにどのように設定できますか?このようなもの:var bool = check_is_in_or_out(marker);ブールで私は真実か間違っているでしょうか? geocodeAddressでreturnを使用しようとしましたが、My変数が定義されていないため、内部関数geocoder.geocodeでのみこれを行うことができますが、この変数はグローバルではありません。あなたがチェックしたい場合は、マーカーの位置や長方形境界の変更(マップの境界が関係ありませんいつでも

function check_is_in_or_out(marker){ 
    var insideRectangle = false; 
    if (rectangle && rectangle.getBounds && marker && marker.getPosition()) 
    insideRectangle = rectangle.getBounds().contains(marker.getPosition()); 

    return insideRectangle; 
} 

はそれを呼び出す:

+0

は、なぜあなたはグラムマップの境界を使用していますか? (または、あなたが使用したい矩形ですか?)また、 'bounds_changed'イベントリスナーは非同期で、その関数は有用な結果を返しません。 – geocodezip

+0

@geocodezipだからbounds_changedの代わりに何を使うべきですか? – JavaCoder

答えて

2
は境界 containsチェックのために編集可能な四角形を使用するように check_is_in_or_outを変更

編集可能な矩形内にある場合)。

proof of concept fiddle

コードスニペット:

あなたはマーカーが長方形であるかどうかを検出しようとしている場合

function check_is_in_or_out(marker) { 
 
    var insideRectangle = false; 
 
    if (rectangle && rectangle.getBounds && marker && marker.getPosition()) 
 
    insideRectangle = rectangle.getBounds().contains(marker.getPosition()); 
 

 
    return insideRectangle; 
 
} 
 

 
var map; 
 
var rectangle; 
 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 45.065140, 
 
     lng: 19.946804 
 
    }, 
 
    zoom: 12 
 
    }); 
 

 
    var geocoder = new google.maps.Geocoder(); 
 

 
    document.getElementById('submit').addEventListener('click', function() { 
 
    geocodeAddress(geocoder, map); 
 
    }); 
 
    var bounds = { 
 
    north: 45.095140, 
 
    south: 45.025140, 
 
    east: 19.966804, 
 
    west: 19.926804 
 
    }; 
 
    // Define a rectangle and set its editable property to true. 
 
    rectangle = new google.maps.Rectangle({ 
 
    bounds: bounds, 
 
    editable: true, 
 
    draggable: true, 
 
    geodesic: true 
 
    }); 
 
    rectangle.setMap(map); 
 

 
    document.getElementById("output").value = check_is_in_or_out(marker); 
 

 
    google.maps.event.addListener(rectangle, 'bounds_changed', function() { 
 
    document.getElementById("output").value = check_is_in_or_out(marker); 
 
    }); 
 
} 
 
var address; 
 
var latitude; 
 
var longitude; 
 
var marker; 
 

 
function geocodeAddress(geocoder, resultsMap) { 
 
    address = document.getElementById('address').value; 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status === 'OK') { 
 
     resultsMap.setCenter(results[0].geometry.location); 
 
     latitude = results[0].geometry.location.lat(); 
 
     longitude = results[0].geometry.location.lng(); 
 
     marker = new google.maps.Marker({ 
 
     map: resultsMap, 
 
     position: results[0].geometry.location 
 
     }); 
 
     document.getElementById("output").value = check_is_in_or_out(marker); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
}
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<div id="floating-panel"> 
 
    <input id="address" type="textbox" value="Dobrodol"> 
 
    <input id="submit" type="button" value="Geocode"> 
 
    <input id="output" type="textbox" value="output"> 
 
</div> 
 
<div id="map"></div> 
 

 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

+0

ありがとう、それは私のために非常に便利です! @geocodezip maybyeあなたは今どのように私はこのブール値をtrueまたはfalse Javaクラスに取得することができます知っている? javafxとWebEngineエンジンの使用= mapWebView.getEngine(); ? – JavaCoder

+0

私は今これに1つの問題があるので、私の投稿を編集しました。私の編集を見てください。 – JavaCoder

+0

これは新しい質問です – geocodezip

関連する問題