个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 17:51:00 25 4
gpt4 key购买 nike

我尝试检查给定的点是否在矩形内部或外部，如果在内部则返回 true，或者如果在外部则返回 false，并且我想将输出写入文本框。我有我的代码ma​​p.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发生了变化，这很好为真或为假。但我怎样才能把这个值设置为 var 呢？像这样的东西: var bool = check_is_in_or_out(marker);在 bool 中我会有 true 或 false？我尝试在 geocodeAddress 中使用 return 但我的变量未定义，所以在我看来，我只能在内部函数 geocoder.geocode 中执行此操作，但我希望此变量是全局变量而不是本地变量。

最佳答案

更改您的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;
}

每当标记位置或矩形边界发生变化时调用它(如果您想检查 map 边界是否位于可编辑矩形内，则 map 边界不相关)。

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>

关于Javascript谷歌地图包含矩形中的点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45527255/

25 4 0
文章推荐： javascript - Bootstrap - $(...).modal 不是函数/解决方案 : DataTables conflict (multiple includes of jquery)
文章推荐： css - 绝对 td 的匹配高度
文章推荐： JavaScript 多级 Promise 跳过了 .then()
文章推荐： javascript - 如何检测 jQuery 中每个() 内部元素的悬停？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com