谷歌地图api v3 - 使用拼贴将区域划分成相等部分 [英] Google maps api v3 - divide region into equal parts using tiles

问题描述

我目前正在将区域划分成相等的部分，并将这些部分在地图上显示给用户，或者使用平铺或矩形（无论哪个看起来不错）。我知道该地区的经纬度。我正在使用下面的代码。有几个要求给出如下。
（1）使用此代码，我无法将区域划分为精确的相等部分。
（2）除以瓦片或长方形后，如何获得每个瓦片的中心。

任何帮助将不胜感激。

function initialize（）{
var myLatlng;
var mapOptions;
myLatlng = new google.maps.LatLng（29.98439980，-95.34140015）;

mapOptions = {
zoom：16，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map（
document.getElementById（map-canvas），mapOptions）;

google.maps.event.addListenerOnce（map，'idle'，function（）{
drawRectangle（map）;
}）;

函数drawRectangle（map）{
var bounds = map.getBounds（）;
var southWest = bounds.getSouthWest（）;
var northEast = bounds.getNorthEast（）;

var numberOfParts = 4;

var tileWidth =（northEast.lng（） - southWest.lng（））/ numberOfParts;
var tileHeight =（northEast.lat（） - southWest.lat（））/ numberOfParts; （var x = 0; x for（var y = 0; y var areaBounds = {

）
north：northEast.lat（）+（tileHeight * y），
south：southWest.lat（），
east：northEast.lng（），
west：southWest。 lng（）+（tileWidth * x）
};

var area = new google.maps.Rectangle（{
strokeColor：'＃FF0000'，
// strokeOpacity：0.8，
strokeWeight：2，
// fillColor：'＃FF0000'，
// fillOpacity：0.35，
map：map，
bounds：areaBounds

}）;




$ b google.maps.event.addDomListener（window，load，initialize）;


解决方案

在迭代时增加正方形的边缘这些值并将起始点固定为左下角：

$ p $函数drawRectangle（map）{
var bounds = map.getBounds（）;
var southWest = bounds.getSouthWest（）;
var northEast = bounds.getNorthEast（）;

var numberOfParts = 4;

var tileWidth =（northEast.lng（） - southWest.lng（））/ numberOfParts;
var tileHeight =（northEast.lat（） - southWest.lat（））/ numberOfParts; （var x = 0; x for（var y = 0; y< numberOfParts; y ++）{
var areaBounds = {
north：southWest.lat（）+（tileHeight *（y + 1）），
south：southWest.lat（）+（tileHeight * y），
east：southWest.lng（）+（tileWidth *（x + 1）），
west：southWest.lng（）+（tileWidth * x）
};

var area = new google.maps.Rectangle（{
strokeColor：'＃FF0000'，
strokeWeight：2，
map：map，
bounds：areaBounds

}）;
}
}
}

概念证明小提琴

代码段：

  function initialize（）{var myLatlng; var mapOptions; myLatlng = new google.maps.LatLng（29.98439980，-95.34140015）; mapOptions = {zoom：16，center：myLatlng，mapTypeId：google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; google.maps.event.addListenerOnce（map，'idle'，function（）{drawRectangle（map）;}）;函数drawRectangle（map）{var bounds = map.getBounds（）; var southWest = bounds.getSouthWest（）; var northEast = bounds.getNorthEast（）; var numberOfParts = 4; var tileWidth =（northEast.lng（） -  southWest.lng（））/ numberOfParts; var tileHeight =（northEast.lat（） -  southWest.lat（））/ numberOfParts; （var x = 0; x  

  html，body，＃map-canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   

I am currently working on dividing the region into equal parts and display those parts to the user on the map either using tiles or rectangles whichever looks nice. I know the latitude and longitude of the region. I am using the following code. There are couple of requirements given below. (1) Using this code, I am not able to divide the region into exact equal parts. (2) After dividing by tiles or rectangles, how to get the center of each tile.

Any help would be appreciated.

function initialize() {     
var myLatlng;    
var mapOptions;
myLatlng = new google.maps.LatLng(29.98439980, -95.34140015);

    mapOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(
      document.getElementById("map-canvas"), mapOptions);

    google.maps.event.addListenerOnce(map, 'idle', function() {
      drawRectangle(map);
    });

    function drawRectangle(map) {
      var bounds = map.getBounds();
      var southWest = bounds.getSouthWest();
      var northEast = bounds.getNorthEast();

      var numberOfParts = 4;

      var tileWidth = (northEast.lng() - southWest.lng()) / numberOfParts;
      var tileHeight = (northEast.lat() - southWest.lat()) / numberOfParts;

      for (var x = 0; x < numberOfParts; x++) {
        for (var y = 0; y < numberOfParts; y++) {
          var areaBounds = {
            north: northEast.lat() + (tileHeight * y),
            south: southWest.lat(),
            east: northEast.lng(),
            west: southWest.lng() + (tileWidth * x)
          };

          var area = new google.maps.Rectangle({
            strokeColor: '#FF0000',
            //strokeOpacity: 0.8,
            strokeWeight: 2,
            //fillColor: '#FF0000',
            //fillOpacity: 0.35,
            map: map,
            bounds: areaBounds

          });
        }
      }
    }   
  }   

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

解决方案

Increment both the edges of the square as you iterate through the values and fix the start point as the lower left corner:

function drawRectangle(map) {
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();

  var numberOfParts = 4;

  var tileWidth = (northEast.lng() - southWest.lng()) / numberOfParts;
  var tileHeight = (northEast.lat() - southWest.lat()) / numberOfParts;
  for (var x = 0; x < numberOfParts; x++) {
    for (var y = 0; y < numberOfParts; y++) {
      var areaBounds = {
        north: southWest.lat() + (tileHeight * (y+1)),
        south: southWest.lat() + (tileHeight * y),
        east: southWest.lng() + (tileWidth * (x+1)),
        west: southWest.lng() + (tileWidth * x)
      };

      var area = new google.maps.Rectangle({
        strokeColor: '#FF0000',
        strokeWeight: 2,
        map: map,
        bounds: areaBounds

      });
    }
  }
}   

proof of concept fiddle

code snippet:

function initialize() {
  var myLatlng;
  var mapOptions;
  myLatlng = new google.maps.LatLng(29.98439980, -95.34140015);

  mapOptions = {
    zoom: 16,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(
    document.getElementById("map-canvas"), mapOptions);

  google.maps.event.addListenerOnce(map, 'idle', function() {
    drawRectangle(map);
  });

  function drawRectangle(map) {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();

    var numberOfParts = 4;

    var tileWidth = (northEast.lng() - southWest.lng()) / numberOfParts;
    var tileHeight = (northEast.lat() - southWest.lat()) / numberOfParts;
    for (var x = 0; x < numberOfParts; x++) {
      for (var y = 0; y < numberOfParts; y++) {
        var areaBounds = {
          north: southWest.lat() + (tileHeight * (y + 1)),
          south: southWest.lat() + (tileHeight * y),
          east: southWest.lng() + (tileWidth * (x + 1)),
          west: southWest.lng() + (tileWidth * x)
        };

        var area = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          //strokeOpacity: 0.8,
          strokeWeight: 2,
          //fillColor: '#FF0000',
          //fillOpacity: 0.35,
          map: map,
          bounds: areaBounds

        });
      }
    }
  }
}

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

这篇关于谷歌地图api v3 - 使用拼贴将区域划分成相等部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！