【问题标题】:Get lat/lng values from google map bounds从谷歌地图边界获取纬度/经度值
【发布时间】:2019-12-09 19:46:47
【问题描述】:

我有一个由 getBounds() 谷歌地图 API 返回的绑定值,如下所示 -

**_.pe {pa: oe, ka: ke}       
ka: ke {g: -180, h: 180}          
pa: oe {g: -26.222936261748305, h: 72.98776122961861}       
__proto__: Object**             

在谷歌上我发现我们可以使用 getSouthWest() 和 getNorthEast() api 来解码
以上信息以获得所需的坐标,但不幸的是它对我不起作用。
我得到以下输出 -

**console.log(vr.getNorthEast())      
VM312861:1          
_.L {lat: ƒ, lng: ƒ}     
lat: ƒ ()        
lng: ƒ ()         
__proto__: Object**  

任何想法如何解决这个问题或我可以用来从边界获取坐标的任何其他方法。

谢谢

【问题讨论】:

    标签: javascript google-maps


    【解决方案1】:

    getNorthEastgetSouthWest 返回 LatLng 对象。要从这些对象中获取原始值,您可以在 LatLng 对象上使用以下函数来获取坐标:.lat() 表示纬度,.lng() 表示经度,或 .toString() 表示坐标的字符串。

    另外,请注意必须初始化地图,否则边界将未定义。

    这是一个工作示例。您可以忽略初始脚本错误,这是由于未使用 API 密钥造成的。只需拖动地图即可查看控制台中所有四个角的坐标:

    let map;
    
    function initialize() {
      let mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    
      map.addListener("dragend", function() {
        let bounds = map.getBounds();
        let ne = bounds.getNorthEast(); // Coords of the northeast corner
        let sw = bounds.getSouthWest(); // Coords of the southwest corner
        let nw = new google.maps.LatLng(ne.lat(), sw.lng()); // Coords of the NW corner
        let se = new google.maps.LatLng(sw.lat(), ne.lng()); // Coords of the SE corner
        console.log(ne.toString(), sw.toString(), nw.toString(), se.toString());
      })
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    #map-canvas {
      height: 500px;
      margin: 0px;
      padding: 0px;
      width: 500px;
    }
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <div id="map-canvas"></div>

    【讨论】:

      猜你喜欢
      • 2011-10-18
      • 2012-09-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-12-04
      • 2014-08-23
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多