地图 - 像素到纬度经度计算

时间:2017-06-29 22:51:57

标签: javascript html maps

我试图获得具有给定宽度,高度和缩放级别的地图的角落。

有没有办法计算没有使用GoogleMaps .getBounds()

我尝试了sphericalmercator,但无法将这些标记移到角落里:



<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://unpkg.com/sphericalmercator@1.0.5"></script>
<div id="map_canvas"></div>
<script>
  var mapEl = document.getElementById('map_canvas');
  var map;

  // Example values:
  var mapHeight = 200;
  var mapWidth = 500;
  var mapZoom = 10;
  var mapCenter = [47.376887, 8.541694];

  mapEl.style.width = mapWidth + 'px';
  mapEl.style.height = mapHeight + 'px';

  // Calculate south, north, west, east
  var sphericalmercator = new SphericalMercator();
  var ll0 = sphericalmercator.ll([0, 0], mapZoom);
  var ll1 = sphericalmercator.ll([mapWidth, mapHeight], mapZoom);
  var latDelta = Math.abs(ll0[1] - ll1[1]);
  var lngDelta = Math.abs(ll0[0] - ll1[0]);

  var south = mapCenter[0] - latDelta / 2
  var north = mapCenter[0] + latDelta / 2
  var west = mapCenter[1] - lngDelta / 2
  var east = mapCenter[1] + lngDelta / 2;
  
  var marker1 = [north, west];
  var marker2 = [south, east];

  // Draw map
  function initialize() {
    var mapOptions = {
      zoom: mapZoom,
      center: new google.maps.LatLng(mapCenter[0], mapCenter[1]),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
    new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(marker1[0], marker1[1])
    });
    new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(marker2[0], marker2[1])
    })
    
  }

  google.maps.event.addDomListener(window, 'load', initialize);
  console.warn = function() {}
  

</script>
&#13;
&#13;
&#13;

任何想法?

1 个答案:

答案 0 :(得分:0)

使用 viewport-mercator-project 进行管理:

&#13;
&#13;
#ifdef DEBUG
    #define IS_IN_DEBUG true
#else
    #define IS_IN_DEBUG false
#endif

if ( IS_IN_DEBUG ) {
  // do something
}
&#13;
&#13;
&#13;