谷歌地图坐标视图答案

【问题标题】：Google maps coordinates view谷歌地图坐标视图
【发布时间】：2015-09-17 21:07:40
【问题描述】：

我有一张常规地图，可以放大/缩小，移动到北、南、东和西。每次我做任何动作我都想得到一个新的地图矩形视图坐标，例如：lat from: x1, lat to: x2, lg from: y1, lg to: y2.

这是我在我的网站上初始化地图的方式：

function initMap() {
    var latLng = new google.maps.LatLng(49.47805, -123.84716);    
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

您能指导我如何实现这一目标吗？

【问题讨论】：

什么是“常规地图”？
请不要假装你没有收到问题。常规地图仅表示地图的简单基本视图。我只想得到一个 4 个角的坐标。
你的意思是像maps.google.com？您如何将其包含在您的网站上？
我更新了我的问题。谢谢！
那是一张google-maps-api-3 的地图。你要哪个坐标？北、南、东、西边界？

标签： google-maps

【解决方案1】：

在中心或边界发生变化时向地图添加侦听器，获取地图的边界并显示您的四个角坐标。

google.maps.event.addListener(map,'zoom_changed', displayBounds);
google.maps.event.addListener(map,'center_changed', displayBounds);

function displayBounds() {
    var bounds = map.getBounds();
    var north = bounds.getNorthEast().lat();
    var east = bounds.getNorthEast().lng();
    var south = bounds.getSouthWest().lat();
    var west = bounds.getSouthWest().lng();
    var northEast = new google.maps.LatLng(north,east);
    var northWest = new google.maps.LatLng(north,west);
    var southEast = new google.maps.LatLng(south,east);
    var southWest = new google.maps.LatLng(south,west);
    // NorthEast, NorthWest, SouthEast, SouthWest
    document.getElementById('coords').innerHTML = "NorthEast: "+northEast.toUrlValue(6)+"<br>NorthWest:" + northWest.toUrlValue(6) + "<br>SouthEast: "+southEast.toUrlValue(6) + "<br>SouthWest:"+southWest.toUrlValue(6)+"<br>";
}

代码 sn-p：

function initMap() {
  var latLng = new google.maps.LatLng(49.47805, -123.84716);
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  google.maps.event.addListener(map, 'zoom_changed', displayBounds);
  google.maps.event.addListener(map, 'center_changed', displayBounds);
  google.maps.event.addListenerOnce(map, 'idle', displayBounds);
}

function displayBounds() {
  var bounds = map.getBounds();
  var north = bounds.getNorthEast().lat();
  var east = bounds.getNorthEast().lng();
  var south = bounds.getSouthWest().lat();
  var west = bounds.getSouthWest().lng();
  var northEast = new google.maps.LatLng(north, east);
  var northWest = new google.maps.LatLng(north, west);
  var southEast = new google.maps.LatLng(south, east);
  var southWest = new google.maps.LatLng(south, west);
  // NorthEast, NorthWest, SouthEast, SouthWest
  document.getElementById('coords').innerHTML = "NorthEast: " + northEast.toUrlValue(6) + "<br>NorthWest:" + northWest.toUrlValue(6) + "<br>SouthEast: " + southEast.toUrlValue(6) + "<br>SouthWest:" + southWest.toUrlValue(6) + "<br>";
}

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

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

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

【讨论】：