Javascript谷歌地图包含矩形中的点_Javascript_Html_Google Maps

Javascript谷歌地图包含矩形中的点

javascript html google-maps

Javascript谷歌地图包含矩形中的点,javascript,html,google-maps,Javascript,Html,Google Maps,我尝试检查给定的点是否在矩形内，或者是否在矩形外，如果在矩形内，返回true，或者是否在矩形外，返回false，我希望将输出写入textBox。我有密码 map.html <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <me

我尝试检查给定的点是否在矩形内，或者是否在矩形外，如果在矩形内，返回true，或者是否在矩形外，返回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>

在

geocodeAddress（geocoder，resultsMap）

document.getElementById（“output”）。value=check\u是\u in\u还是\u out（marker）和我的文本框更改为true或false。但是如何将这个值设置为var呢？类似这样的东西：var bool=check_is_in_或_out（标记）；在布尔我会有对还是错？

我尝试在geocodeAddress中使用return，但是我的变量没有定义，所以在我看来，我只能在内部函数geocoder.geocode中使用return，但是我希望这个变量是全局的，而不是局部的

更改您的

check_is_in_或_out

以使用可编辑矩形作为边界

包含的

检查：

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 insideRectangle=假；
if（rectangle&&rectangle.getBounds&&marker&&marker.getPosition（））
insideRectangle=rectangle.getBounds（）.contains（marker.getPosition（））；
返回内直角；
}
var映射；
var矩形；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
纬度：45.065140，
液化天然气：19.946804
},
缩放：12
});
var geocoder=new google.maps.geocoder（）；
document.getElementById（'submit'）。addEventListener（'click'，function（）{
地理编码地址（地理编码器、地图）；
});
变量界限={
北：45.095140，
南：45.025140，
东：19.966804，
西：19.926804
};
//定义矩形并将其“可编辑”属性设置为true。
矩形=新的google.maps.rectangle({
界限:界限,，
是的，
真的，
测地线：真
});
矩形.setMap（map）；
document.getElementById（“输出”）.value=check\u是\u in\u还是\u out（标记）；
google.maps.event.addListener（矩形，'bounds_changed'，function（）{
document.getElementById（“输出”）.value=check\u是\u in\u还是\u out（标记）；
});
}
var地址；
纬度；
var经度；
var标记；
函数geocodeAddress（geocoder，resultsMap）{
地址=document.getElementById（'address'）。值；
地理编码({
“地址”：地址
}，功能（结果、状态）{
如果（状态=='OK'）{
resultsMap.setCenter（结果[0].geometry.location）；
纬度=结果[0]。几何体。位置。纬度（）；
经度=结果[0]。几何体。位置。lng（）；
marker=新的google.maps.marker({
地图：结果地图，
位置：结果[0]。几何体。位置
});
document.getElementById（“输出”）.value=check\u是\u in\u还是\u out（标记）；
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}

html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

更改您的

检查是“输入”还是“输出”

以将可编辑矩形用于边界

包含的检查：
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 insideRectangle=假；
if（rectangle&&rectangle.getBounds&&marker&&marker.getPosition（））
insideRectangle=rectangle.getBounds（）.contains（marker.getPosition（））；
返回内直角；
}
var映射；
var矩形；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
纬度：45.065140，
液化天然气：19.946804
},
缩放：12
});
var geocoder=new google.maps.geocoder（）；
document.getElementById（'submit'）。addEventListener（'click'，function（）{
地理编码地址（地理编码器、地图）；
});
变量界限={
北：45.095140，
南：45.025140，
东：19.966804，
西：19.926804
};
//定义矩形并将其“可编辑”属性设置为true。
矩形=新的google.maps.rectangle({
界限:界限,，
是的，
真的，
测地线：真
});
矩形.setMap（map）；
document.getElementById（“输出”）.value=check\u是\u in\u还是\u out（标记）；
google.maps.event.addListener（矩形，'bounds_changed'，function（）{
document.getElementById（“输出”）.value=check\u是\u in\u还是\u out（标记）；
});
}
var地址；
纬度；
var经度；
var标记；
函数geocodeAddress（geocoder，resultsMap）{
地址=document.getElementById（'address'）。值；
地理编码({
“地址”：地址
}，功能（结果、状态）{
如果（状态=='OK'）{
resultsMap.setCenter（结果[0].geometry.location）；
纬度=结果[0]。几何体。位置。纬度（）；
经度=结果[0]。几何体。位置。lng（）；
marker=新的google.maps.marker({
地图：结果地图，
位置：结果[0]。几何体。位置
});
document.getElementById（“输出”）.value=check\u是\u in\u还是\u out（标记）；
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}