如何在谷歌地图 api v3 中创建网格答案

【问题标题】：How do I create a grid in google maps api v3如何在谷歌地图 api v3 中创建网格
【发布时间】：2023-04-09 23:08:02
【问题描述】：

我是新手。我想要做的是，创建了 2 个标记（它们是可拖动的），它们之间会有网格，比如 http://prntscr.com/4nx9f3 。当我更改其中一个标记时，应该更改网格。我正在尝试用折线绘制。顺便说一句，我无法使用 marker1.getPosition().lat() 获得纬度或经度。感谢您的帮助...

我的所有代码：

        <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script>
            var map;
            var marker1;
            var marker2;


            function initialize() {
                var mapOptions = {
                    zoom: 10,
                    center: new google.maps.LatLng(50.3, 44.3)
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

                marker1 = new google.maps.Marker({
                    position: new google.maps.LatLng(50.1, 44.1),
                    map: map,
                    draggable: true,
                    title: 'marker1 '

                });
                marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(50.5, 44.5),
                    map: map,
                    draggable: true,
                    title: 'marker2'
                });


                var flightPlanCoordinates = [
                    marker1.getPosition(),
                    marker2.getPosition(),
                 ];

                // code below is not working
                /* 
                google.maps.event.addListener(marker1, 'dragend', function () {

                polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));
                });

                google.maps.event.addListener(marker2, 'dragend', function () {

                polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));

                */
                var polyline = new google.maps.Polyline(
                { path: flightPlanCoordinates,
                    geodesic: true,
                    strokeColor: '#FF0000',
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                });

                var lat1 = marker1.getPosition().lat();
                var lng1 = marker1.getPosition().lng();
                var lat2 = marker2.getPosition().lat();
                var lng2 = marker2.getPosition().lng();

                // I tried to get distance between 2 markers but it did not work either
                /*   function distance(
                lat1, 
                lng1, 
                lat2, 
                lng2
                ) {
                var R = 6371;
                var a =
                0.5 - Math.cos((lat2 - lat1) * Math.PI / 180) / 2 +
                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                (1 - Math.cos((lon2 - lon1) * Math.PI / 180)) / 2;

                return R * 2 * Math.asin(Math.sqrt(a));
                }
                */


                polyline.setMap(map);

            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
      </head>
      <body>
        <div id="map-canvas"></div>
      </body>
    </html>

【问题讨论】：

标签： javascript google-maps-api-3 google-maps-markers

【解决方案1】：

我认为这就是你想要做的。将您的 rectangleLng 数组更改为二维数组，并将 excLat/excLng 变量更改为不四舍五入（它们也向后以及 extLat 想要向上/向下，excLng 应该并排）。

proof of concept fiddle

代码 sn-p：

var map;
var marker1;
var marker2;
var rectangle;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(38.4, 26.7)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(38.3, 26.6),
    map: map,
    draggable: true,
    title: 'marker1'
  });
  google.maps.event.addListener(marker1, 'click', function(evt) {
    infowindow.setContent(marker1.getPosition().toUrlValue(6));
    infowindow.open(map, this);
  });
  marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(38.5, 26.8),
    map: map,
    draggable: true,
    title: 'marker2'
  });
  google.maps.event.addListener(marker2, 'click', function(evt) {
    infowindow.setContent(marker1.getPosition().toUrlValue(6));
    infowindow.open(map, this);
  });
  rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      marker1.getPosition(),
      marker2.getPosition())
  });

  var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
  var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;

  google.maps.event.addListener(marker1, 'dragend', function() {

    rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition()));
    leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
    makeGrid();
  });

  google.maps.event.addListener(marker2, 'dragend', function() {

    rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition()));
    belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;
    makeGrid();
  });
  makeGrid();
}

var rectangleLat = [];
var rectangleLng = [];

function makeGrid() {
  for (x in rectangleLng) {
    for (y in rectangleLng[x]) {
      if (rectangleLng[x][y].setMap) {
        rectangleLng[x][y].setMap(null)
        rectangleLng[x][y] = null;
      }
    }
  }
  var leftSideDist = marker2.getPosition().lng() - marker1.getPosition().lng();
  var belowSideDist = marker2.getPosition().lat() - marker1.getPosition().lat();

  var dividerLat = 5;
  var dividerLng = 5; //ilerde kullanıcıdan alınacak
  var excLat = belowSideDist / dividerLat;
  var excLng = leftSideDist / dividerLng;

  var m1Lat = marker1.getPosition().lat();
  var m1Lng = marker1.getPosition().lng();
  var m2Lat = marker2.getPosition().lat();
  var m2Lng = marker2.getPosition().lng();
  document.getElementById('info').innerHTML += "dividerLat=" + dividerLat + ", excLat=" + excLat + "<br>";
  document.getElementById('info').innerHTML += "dividerLng=" + dividerLat + ", excLng=" + excLng + "<br>";
  document.getElementById('info').innerHTML += "m1=" + marker1.getPosition().toUrlValue(6) + "<br>";
  document.getElementById('info').innerHTML += "m2=" + marker2.getPosition().toUrlValue(6) + "<br>";

  for (var i = 0; i < dividerLat; i++) {
    if (!rectangleLng[i]) rectangleLng[i] = [];
    for (var j = 0; j < dividerLng; j++) {
      if (!rectangleLng[i][j]) rectangleLng[i][j] = {};


      rectangleLng[i][j] = new google.maps.Rectangle({
        strokeColor: '#FFFFFF',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.1,
        map: map,
        bounds: new google.maps.LatLngBounds(
          new google.maps.LatLng(m1Lat + (excLat * i), m1Lng + (excLng * j)),
          new google.maps.LatLng(m1Lat + (excLat * (i + 1)), m1Lng + (excLng * (j + 1))))

      });
      document.getElementById('info').innerHTML += "[i=" + i + ",j=" + j + "]:" + rectangleLng[i][j].getBounds() + "<br>";



    } //for j Lng

  } //for i Lat


  document.getElementById('left').value = leftSideDist;
  document.getElementById('blw').value = belowSideDist;
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  /* border: 1px solid #999;*/
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
<div id="panel" style="margin-left:-320px">leftSideDist:
  <input type="text" readonly id="left">belowSideDist:
  <input type="text" readonly id="blw">
</div>
<div id="info"></div>

【讨论】：

【解决方案2】：

要在标记被拖动后获取其坐标，请更改：

  google.maps.event.addListener(marker1, 'dragend', function() {
      polyline.LatLngBounds(new google.maps.LatLng(marker1.getPosition(), marker2.getPosition()));
  });

到：

  google.maps.event.addListener(marker1, 'dragend', function(event) {
      polyline.LatLngBounds(event.latLng);
  });

但是，折线对象上没有LatLngBounds函数。

【讨论】：

我用dragend处理，现在我只需要在这两个标记上创建网格
你如何定义你的网格 - 你希望在点之间总是有相同数量的线，即线之间的间隙可能会随着标记的拖动而改变？或者您总是将网格线绘制成 x 米，因此当您拖动标记时可能需要添加或删除线条？
是的，现在我想在这 2 个标记内创建 25 个矩形 (5x5)。但是当我改变任何一个标记位置时，盒子会改变

【解决方案3】：

As far as i done:

    <!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?          
    sensor=false&v=3&libraries=geometry"></script>
    <script>
        var map;
        var marker1;
        var marker2;
        var rectangle;

        function initialize() {
            var mapOptions = {
                zoom: 11,
                center: new google.maps.LatLng(38.4, 26.7)
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

            marker1 = new google.maps.Marker({
                position: new google.maps.LatLng(38.3, 26.6),
                map: map,
                draggable: true,
                title: 'marker1'
            });
            marker2 = new google.maps.Marker({
                position: new google.maps.LatLng(38.5, 26.8),
                map: map,
                draggable: true,

                title: 'marker2'
            });

            rectangle = new google.maps.Rectangle({
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                bounds: new google.maps.LatLngBounds(
                        marker1.getPosition(),
                        marker2.getPosition())
            });

            var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
            var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;

            google.maps.event.addListener(marker1, 'dragend', function () {

                rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition()));
                leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
            });

            google.maps.event.addListener(marker2, 'dragend', function () {

                rectangle.setBounds(new google.maps.LatLngBounds(marker1.getPosition(), marker2.getPosition()));
                belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;
            });



            var leftSideDist = Math.round((marker2.getPosition().lng() - marker1.getPosition().lng()) * 10000) / 100;
            var belowSideDist = Math.round((marker2.getPosition().lat() - marker1.getPosition().lat()) * 10000) / 100;

            var dividerLat = 5;
            var dividerLng = 5; //ilerde kullanıcıdan alınacak
            var excLat = leftSideDist / dividerLat;
            var excLng = belowSideDist / dividerLng;

            var rectangleLat[];
            var rectangleLng[];

            var m1Lat = marker1.getPosition().lat();
            var m1Lng = marker1.getPosition().lng();
            var m2Lat = marker2.getPosition().lat();
            var m2Lng = marker2.getPosition().lng();

            for (var i = 0; i < dividerLat; i++) {

                for (var j = 0; j < dividerLng; j++) {



                    rectangleLng[i*5+j] = new google.maps.Rectangle({
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35,
                        map: map,
                        bounds: new google.maps.LatLngBounds(
                        ( m1Lat , (excLng*(j+1) ) ),
                        ( m1Lat+excLat, m2Lng+(excLng*(j+1) ) ) )

                    });



                }//for j Lng

             }//for i Lat


            document.getElementById('left').value = leftSideDist;
            document.getElementById('blw').value = belowSideDist;
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="panel" style="margin-left:-320px">
      leftSideDist: <input type="text" readonly id="left">
      belowSideDist: <input type="text" readonly id="blw">
    </div>
  </body>
</html>

【讨论】：