Question

我尝试检查给定的poiont是否在Rectangle内部，或者在if内部返回true，或者如果在outside之外返回false，我想要写入输出到textBox。我有我的代码的 map.html

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

如果给定的点位于内部，我希望得到我的输出true或者如果在外面则获得false 那么，我该怎么做呢？不，我使用时没有任何事情发生：document.getElementById("output").value = check_is_in_or_out(marker); * API_KEY 如果您没有使用API KEY，请改为：http://maps.google.com/maps/api/js?sensor=false

修改感谢geocodezip的帮助。现在我的代码是：

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

geocodeAddress(geocoder, resultsMap)我们使用document.getElementById("output").value = check_is_in_or_out(marker);并且我的textBox更改为true或false。但是我怎么能把这个值设置为var？像这样：var bool = check_is_in_or_out（marker）;在布尔我会有真假吗？我尝试在geocodeAddress中使用return但是我的变量是未定义的，所以在我看来，我只能在内部函数geocoder.geocode中执行此操作，但我希望此变量全局不是本地的。

Answer 1

更改您的check_is_in_or_out以使用可编辑的矩形进行边界contains检查：

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

每当标记位置或矩形边界发生变化时调用它（如果要检查地图边界是否在可编辑矩形内，则地图边界不相关）。

proof of concept fiddle

代码段

＆＃13;

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);
    }
  });
}

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

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

＆＃13;

Javascript谷歌地图包含矩形点

1 个答案: