如何获取标记的像素坐标答案

【问题标题】：how to obtain marker's pixel coordinates如何获取标记的像素坐标
【发布时间】：2020-07-28 15:05:31
【问题描述】：

我的代码在每次点击地图时都会在地图上放置一个标记。目标是获取每个时间标记的纬度/经度坐标和像素坐标。到目前为止，我只在获得纬度/经度坐标方面取得了成功。现在下一步是将这些作为输入并计算像素坐标。

<script>
    function initMap() {41.85, -87.65
    var myLatlng = {lat: 41.85, lng: -87.65};
    var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 18,
                                           center: myLatlng,
                                           disableDefaultUI: false,
                                           mapTypeId: 'satellite',
                                           zoomControl: true,
                                           mapTypeControl: true,
                                           scaleControl: true,
                                           streetViewControl: false,
                                           rotateControl: false,
                                           fullscreenControl: true});

    map.setOptions({draggableCursor:'default'});
    map.addListener('click', function(marker){

    marker = new google.maps.Marker({map: map,
                                     clickable: false,
                                     position: marker.latLng,
                                     })

    var markerposLat = marker.getPosition().lat();
    var markerposLon = marker.getPosition().lng();
    
     function pixl(markerposLat,markerposLon){
       var projection = map.getProjection();
       var bounds = map.getBounds();
       var topRight = projection.fromLatLngToPoint(bounds.getNorthEast());
       var bottomLeft = projection.fromLatLngToPoint(bounds.getSouthWest());
       var scale = Math.pow(2, map.getZoom());
       var worldPoint = projection.fromLatLngToPoint(markerposLat,markerposLon);
       return [Math.floor((worldPoint.x - bottomLeft.x) * scale), Math.floor((worldPoint.y - topRight.y) * scale)]
    };

    localStorage["pixl"] = JSON.stringify(pixl);
    localStorage["markerLat"] = JSON.stringify(markerposLat);
    localStorage["markerLon"] = JSON.stringify(markerposLon);
    console.log(localStorage["pixl"],localStorage["markerLat"], localStorage["markerLon"]);
  });

}
</script>

函数 pixl 始终未定义。我意识到这是一个被问过很多次的问题。事实上，我尝试了很多方法。我的出发点是：convert-lat-lon-to-pixels-and-back，当然还有：showing pixel and tile coordinates。我无法发现问题。

【问题讨论】：

在我看来，您将函数指针传递给 JSON.stringify，而不是调用函数并传递它的结果。

标签： javascript google-maps coordinates

【解决方案1】：

请注意fromLatLngToPoint 方法需要google.maps.LatLng 类作为其参数。来自documentation：

fromLatLngToPoint(latLng[, point])

参数：
纬度：纬度
点：点可选

返回值：点可选

从 LatLng 圆柱体平移到 Point 平面。此接口指定一个函数，该函数实现从给定 LatLng 值到地图投影上的世界坐标的转换。 Maps API 在需要在屏幕上绘制位置时调用此方法。投影对象必须实现此方法，但如果投影无法计算Point，则可能返回null。

所以在你的代码中，我会这样做：

var worldPoint = projection.fromLatLngToPoint(marker.getPosition());

我（和@geocodezip）注意到的另一件事是您没有将参数传递给pixl 函数。这就是为什么它旨在让您获得undefined 响应。为了获得正确的值，您应该包含如下参数：

localStorage["pixl"] = JSON.stringify(pixl((markerposLat,markerposLon)));

这是working fiddle。

【讨论】：