LatLngBounds - 如何获得SW和NE点 [英] LatLngBounds - how to get SW and NE points

问题描述

我尝试使用Google地图的自动填充功能，并将结果偏向 LatLngBounds 。我希望能够在岛屿周围绘制矩形（例如夏威夷群岛），并以此方式获取LatLngBounds。有没有什么工具可以帮助我？

解决方案

很久以前，我写了一个缩放窗口供您使用。它只是地图和矩形侦听器。

http://jsfiddle.net/yV6xv/16/embedded/result/

查看代码：

http://jsfiddle.net/yV6xv/16/

要使用它，请先放大并手动平移到您的岛屿。您想要选择的整个区域必须在屏幕上可见。

然后点击一次定义一个矩形角。将鼠标移向对角线的对角。 （矩形选择将出现）。再次单击以定义矩形区域。地图上方的textarea应该为您提供SW和NE点的所选LatLngBounds。

试图包含国际日期行时，它的行为并不像预期的那样。 / p>

  var map; 
 
 var mapOptions = {
 center：new google.maps.LatLng（0.0，0.0），
 zoom：2，
 mapTypeId：google.maps.MapTypeId。 ROADMAP 
}; 
 var bounds; 
 var pt1，pt2; 
 var rect; 
 
函数toLatLng（lat，lng）{
 return new google.maps.LatLng（lat，lng）; 
} 
 
函数toBounds（j，k）{
 var pts = []; 
 var latMin，latMax，lngMin，lngMax; 
 var sw，ne; 
 
 latMin = Math.min（j.lat（），k.lat（））; 
 latMax = Math.max（j.lat（），k.lat（））; 
 
 lngMin = Math.min（j.lng（），k.lng（））; 
 lngMax = Math.max（j.lng（），k.lng（））; 
 
 sw = toLatLng（latMin，lngMin）; 
 ne = toLatLng（latMax，lngMax）; 
返回新的google.maps.LatLngBounds（sw，ne）; 
 
 
函数初始化（）{
 map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 rect = new google.maps.Rectangle（{
 fillColor：＃FFFF00，
 fillOpacity：0.3，
 strokeColor：＃0000FF，
 strokeWeight： 2 
}）; 
 
 //激活框
 google.maps.event.addListener（map，'click'，function（event）{
 pt1 = event.latLng; 
 rect.setMap（map）; 
}）; 
 
 //修改框的大小
 google.maps.event.addListener（map，'mousemove'，function（event）{
 if（rect.getMap（）==地图）{
 rect.setBounds（toBounds（pt1，event.latLng））; 
} 
}）; 
 
 //移除缩放窗口并放大
 google.maps.event.addListener（rect，'click'，function（event）{
 rect.setMap（null） ; 
 pt2 = event.latLng; 
 myBounds = toBounds（pt1，pt2）; 
 
 document.getElementById（selectedBounds）。value =new google.maps.LatLngBounds （new google.maps.LatLng+ myBounds.getSouthWest（）+，new google.maps.LatLng+ myBounds.getNorthEast（）+）;; 
}）; 
 
 //允许缩小盒子
 google.maps.event.addListener（rect，'mousemove'，function（event）{
 if（rect.getMap（）==地图）{
 rect.setBounds（toBounds（pt1，event.latLng））; 
} 
}）; 
 
  

HTML

 < textarea id =selectedBoundscols =60rows =4>< / textarea> 
< div id =map_canvas>< / div> 
  

I'm trying to use Google Maps' autocomplete and bias results to LatLngBounds. I'd like to be able to draw a rectangle around an island (say the Hawaiian islands) and get the LatLngBounds that way. Is there any tool I can use to help me?

解决方案

A long time ago I wrote a "Zoom window" that I adapted for your use. It's just map and rectangle listeners.

http://jsfiddle.net/yV6xv/16/embedded/result/

to see code:

http://jsfiddle.net/yV6xv/16/

To use it, first zoom in and pan manually to your island. The whole area you want to select must be visible on-screen.

Then click once to define a rectangle corner. Move the mouse towards the diagonally opposite corner. (A rectangular selection will appear). Click again to define the rectangular area. The textarea above the map should give you the selected LatLngBounds with SW and NE points.

It just doesn't behave as expected when trying to contain the International Date Line.

  var map;

  var mapOptions = {
    center: new google.maps.LatLng(0.0, 0.0),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var bounds;
  var pt1, pt2;
  var rect;

  function toLatLng(lat, lng) {
    return new google.maps.LatLng(lat, lng);
  }

  function toBounds(j,k) {
    var pts = [];
    var latMin, latMax, lngMin, lngMax;
    var sw, ne;

    latMin = Math.min(j.lat(), k.lat());
    latMax = Math.max(j.lat(), k.lat());

    lngMin = Math.min(j.lng(), k.lng());
    lngMax = Math.max(j.lng(), k.lng());

    sw = toLatLng(latMin, lngMin);
    ne = toLatLng(latMax, lngMax);
    return new google.maps.LatLngBounds(sw, ne);
  }

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    rect = new google.maps.Rectangle({
      fillColor: "#FFFF00",
      fillOpacity: 0.3,
      strokeColor: "#0000FF",
      strokeWeight: 2
    });

    // Activate the box
    google.maps.event.addListener(map, 'click', function(event) {
      pt1 = event.latLng;
      rect.setMap(map);
    });

    // Modify the box's size
    google.maps.event.addListener(map, 'mousemove', function(event) {
      if(rect.getMap() == map) {
        rect.setBounds(toBounds(pt1, event.latLng));
      }
    });

    // Remove the zoom window and zoom in
    google.maps.event.addListener(rect, 'click', function(event) {
      rect.setMap(null);
      pt2 = event.latLng;
      myBounds = toBounds(pt1, pt2);

      document.getElementById("selectedBounds").value = "new google.maps.LatLngBounds(new google.maps.LatLng" + myBounds.getSouthWest() + ", new google.maps.LatLng" + myBounds.getNorthEast() + ");";
    });

    // Allows shrinking the box
    google.maps.event.addListener(rect, 'mousemove', function(event) {
      if(rect.getMap() == map) {
        rect.setBounds(toBounds(pt1, event.latLng));
      }
    });
  }

HTML

<textarea id="selectedBounds" cols="60" rows="4"></textarea>
<div id="map_canvas"></div>​

这篇关于LatLngBounds - 如何获得SW和NE点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！