google maps fromDivPixelToLatLng неожиданные результаты - PullRequest
Новая
       5

google maps fromDivPixelToLatLng неожиданные результаты

0 голосов
/ 23 октября 2019

Я сейчас работаю над картами Google. Я сталкивался с этим методом fromDivPixelToLatLng, который согласно документации преобразует пиксельные координаты в широту и долготу. Мой вопрос: как работает fromDivPixelToLatLng, я имею в виду, какую систему координат он использует. Пожалуйста, смотрите мои комментарии в примере кода ниже 

new google.maps.Marker({
    map: map,
    title: '0, 0',
    position: overlay.getProjection().fromDivPixelToLatLng(
      new google.maps.Point(0, 0) // converts into such a lat and lng that marker is right in
      //middle of screen which lead me to believe that it was following cartesian coordinate
    )
  });



new google.maps.Marker({
    map: map,
    title: '100, 100',
    position: overlay.getProjection().fromDivPixelToLatLng(
      new google.maps.Point(100, 100) // i was expecting to be 100px right from center and 
       //100px away from top but instead it's draw in fourth quadrant
    )
  });

Вот скрипка, если вы хотите попробовать это сами.

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

Я подозреваю, что вы хотите fromContainerPixelToLatLng:

fromContainerPixelToLatLng (pixel [, nowrap])
Параметры:
pixel: точка необязательно
nowrap: булево необязательно
Возвращаемое значение: LatLng необязательно Вычисляет географические координаты из координат пикселей в контейнере карты .

  • Point(0,0) - верхний левый угол<div>, содержащий google.maps.Map
  • Point(100,100), находится внизу и справа на 100 пикселей от верхнего левого угла.

подтверждение концепции скрипта

При fromDivPixelToLatLng (из документации):

Вычисляет географические координаты из пиксельных координат в элементе div, в котором находится перетаскиваемая карта.

(отличается от «контейнера карты», который используется fromContainerPixelToLatLng)

фрагмент кода: 

function drawMarkers() {
  var marker0 = new google.maps.Marker({
    map: map,
    title: '0, 0',
    position: overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(0, 0))
  });
  marker0.addListener('click', function(e) {
    var iw = new google.maps.InfoWindow();
    iw.setContent("Point(0,0)")
    iw.open(map, marker0);
  });
  google.maps.event.trigger(marker0, 'click');
  var marker = new google.maps.Marker({
    map: map,
    title: '100, 100',
    position: overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(100, 100))
  });
  marker.addListener('click', function(e) {
    var iw = new google.maps.InfoWindow();
    iw.setContent("Point(100,100)")
    iw.open(map, marker);
  });
  google.maps.event.trigger(marker, 'click');
}

function draw() {
  var mapBounds = new google.maps.LatLngBounds(map.getBounds().getSouthWest(),
    this.map.getBounds().getNorthEast());
  projection = overlay.getProjection();
  var tr = new google.maps.LatLng(mapBounds.getNorthEast().lat(),
    bounds.getNorthEast().lng());
  var bl = new google.maps.LatLng(mapBounds.getSouthWest().lat(),
    mapBounds.getSouthWest().lng());
}

function initMap() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  /* marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  }); */
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<button onclick="drawMarkers()">
  Draw Markers</button>
</button>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
0 голосов
/ 23 октября 2019

Пиксели Google Map, вероятно, не соответствуют вашим реальным пикселям веб-страницы. Карты имеют несколько систем координат, от широты / ширины до плиток, до «пикселей» карты (относительно масштаба);ни один из которых не является фактическим пикселем HTML.

Возможно, вы захотите использовать это вместо: 

var coordinates = overlay.getProjection().fromContainerPixelToLatLng(
    new google.maps.Point(x, y)
);

(из https://stackoverflow.com/a/28037006/1060646)

Я поиграл с вашей скрипкой и добавилиспользуя новый маркер, он помещается в верхний / левый угол вашего DIV, как и следовало ожидать: 

new google.maps.Marker({
    map: map,
    title: '0, 0 new',
    position: overlay.getProjection().fromContainerPixelToLatLng(
        new google.maps.Point(0,0)
    )
  });

Подробнее о координатах карты и тайла: https://developers.google.com/maps/documentation/javascript/coordinates

...