Javascript 基于鼠标坐标从谷歌地图获取纬度和经度

我有一个页面，我有一个可以用RxJS拖拽的小人物。当拖动结束时，如果它在页面上的谷歌地图上结束，我想将鼠标坐标转换为一个纬度和经度

我在SO和Web上的其他地方找到/拼凑了这个实现

function pixelOffsetToLatLng(map, offsetx, offsety) {
        var mapZoom = map.getZoom();
        var scale = Math.pow(2, mapZoom);
        var mapCenter = map.getCenter();

        var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(mapCenter);
        var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);

        var worldCoordinateNewCenter = new google.maps.Point(
            worldCoordinateCenter.x - pixelOffset.x,
            worldCoordinateCenter.y + pixelOffset.y
        );

        var latLngPosition = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

        return latLngPosition;
      }

但它给出了错误的结果。它似乎对地球上的位置和变焦高度特别敏感

我在下面包含了一个以0,0为中心的片段，旁边有一个标记。如果反复将人物放在标记上并缩小，您将看到lat、lng的值随缩放级别发生显著变化。我不明白为什么

提前谢谢

//从这里改编https://gist.github.com/mattpodwysocki/2156153 //这是一个RXJS拖放实现。下面使用它为谷歌地图提供屏幕坐标 函数记录器{ "严格使用",； dragger.init=函数{ var dragTarget=$'dragTarget'； //获取三大事件 window.dragger.mouseup=dragTarget.onAsObservable'mouseup'； window.dragger.mousemove=dragTarget.onAsObservable'mousemove'； window.dragger.mousedown=dragTarget.onAsObservable'mousedown'。选择FunctionEvent{ //按下鼠标时计算偏移量 违约事件； 返回{ 左：event.clientX-dragTarget.offset.left， 顶部：event.clientY-dragTarget.offset.top }; }; //将鼠标向下移动与鼠标移动相结合，直到鼠标向上移动 window.dragger.mousedrag=window.dragger.mousedown.selectManyfunctionoffset{ 返回窗口.dragger.mousemove.selectfunctionpos{ //计算从鼠标下移到鼠标移动的偏移量 返回{ 左：位置clientX-偏移量左， 顶部：pos.clientY-offset.top }; }.takeUntilwindow.dragger.mouseup； }; window.dragger.mousedrag.subscribefunctionpos{ //更新位置 dragTarget.css{ 顶部：位置顶部， 左：位置左 }; }; window.dragger.mousedown.subscribebefunction{ $'dragTarget person'。隐藏； $“dragTarget购物者”。显示； }; window.dragger.mouseup.subscriptbefunctionpos{ $'dragTarget person'。显示； $“dragTarget购物者”。隐藏； $'aside ul'.append$.append'shopper落在x:'+pos.clientX+'和y:'+pos.clientY； }; }; }window.dragger=window.dragger | |{}； window.dragger.init； 函数映射{ "严格使用",； //从StackOverflow上的其他地方拼凑起来的函数，用于从页面坐标转换 //经纬度 函数像素OffsetToLatlngMap、offsetx、offsety{ var mapZoom=map.getZoom； var scale=Math.pow2，mapZoom； var mapCenter=map.getCenter； var worldCoordinateCenter=map.getProjection.fromLatLngToPointmapCenter； var pixelOffset=new google.maps.Pointoffsetx/scale | | 0，offsety/scale | | 0； var worldcordinatenewcenter=新建google.maps.Point worldCoordinateCenter.x-pixelOffset.x， 世界坐标中心y+像素偏移量y ; var latLngPosition=map.getProjection.frompoint到AtlngWorldCoordinarenewCenter； 返回板条位置； } gmaps.init=函数{ //设置以0,0为中心的贴图 var mapCanvas=$'map'； 变量映射选项={ 中心：新的google.maps.LatLng0，0， 缩放：14， mapTypeId:google.maps.mapTypeId.ROADMAP }; var map=new google.maps.MapCanvas[0]，mapOptions； //在附近放置一个标记作为参考点 var marker=new google.maps.marker{ 位置：新的google.maps.Marker{lat:0.001，lng:0.001}， 地图：地图， 标题：“0.001，0.001” }; //每次删除可拖动人员时运行此功能 window.dragger.mouseup.subscriptbefunctionpos{ var ll=像素偏移设置图，位置pageX，位置pageY； $'aside ul'。append$.append'shopper drop at lat:'+ll.lat+'和y:'+ll.lng； }; }; }window.gmaps=window.gmaps | |{}； window.gmaps.init； 拖靶{ 位置：绝对位置； z指数：999； } 格雷巴布尔先生{ 光标：移动；/*如果不支持抓取光标，则返回*/ 光标：抓取； 光标：-moz抓取； 光标：-webkit抓取； } /*可选：在拖动操作期间应用闭合的手动光标*/ .grabbable：活动{ 光标：抓取； 光标：-moz抓取； 光标：-webkit抓取； } 地图{ 高度：400px； 宽度：400px； 浮动：左； 背景颜色：浅黄色； } 旁白{ 高度：400px； 宽度：200px； 浮动：对； 背景颜色：浅灰色； }

---

我觉得很一致，很有趣。我在OSX上使用Chrome，虽然这真的不重要，而且它绝对会给出不好的值-我从一些代码中提取出来，继续做多边形中的点，几乎永远不会成功，因为点几乎总是错误的。这对你有用吗

---

k但它看起来像是在使用谷歌地图点击事件来获取lat和lng，而这对我来说是不可用的。这个答案中的函数似乎对我有用：尽管我没有花时间去探究差异。。。