由Google地图绘制的矩形DrawingManager不会触发mousemove事件 [英] Rectangle drawn by google maps DrawingManager does not trigger the mousemove event

问题描述

我想：

• 在Google地图上绘制矩形


• 矩形


• 显示鼠标移动时的当前位置

与此代码 - http://jsfiddle.net/mark69_fnd/vBwf6/4/
我订阅了图形管理器实例的 rectanglecomplete 事件来处理上一个矩形，保存参考到新的一个，并在矩形上订阅mousemove事件。

问题在于 mousemove 事件从来没有触发过。

我做错了什么以及如何解决它？

谢谢。

解决方案

这是一个函数，它给出了与坐标图容器左上角相关的像素偏移量的GPS坐标。

 函数getLatLngByOffset（map，offsetX，offsetY）{
 var currentBounds = map.getBounds（）; 
 var topLeftLatLng = new google.maps.LatLng（currentBounds.getNorthEast（）。lat（），
 currentBounds.getSouthWest（）。lng（））; 
 var point = map.getProjection（）。fromLatLngToPoint（topLeftLatLng）; 
 point.x + = offsetX /（1 <| lt; map.getZoom（））; 
 point.y + = offsetY /（1 << 返回map.getProjection（）。fromPointToLatLng（point）; 
 
  

添加'onmousemove'事件侦听器，然后传递与div左上角相关的鼠标位置。

更新： DEMO （在 Chrome上测试）

I want to:

• Draw rectangles on a google map
• Have at most on rectangle
• Display the current location of the mouse when it moves

So, I came up with this code - http://jsfiddle.net/mark69_fnd/vBwf6/4/ I subscribe to the rectanglecomplete event of the DrawingManager instance in order to dispose of the previous rectangle, save the reference to the new one and subscribe to the mousemove event on the rectangle.

The problem, is that the mousemove event is never triggered.

What am I doing wrong and how to fix it?

Thanks.

解决方案

Here is a function, which gives GPS coordinates by pixel offset related to top-left corner of map's container.

function getLatLngByOffset( map, offsetX, offsetY ){
    var currentBounds = map.getBounds();
    var topLeftLatLng = new google.maps.LatLng( currentBounds.getNorthEast().lat(),
                                                currentBounds.getSouthWest().lng());
    var point = map.getProjection().fromLatLngToPoint( topLeftLatLng );
    point.x += offsetX / ( 1<<map.getZoom() );
    point.y += offsetY / ( 1<<map.getZoom() );
    return map.getProjection().fromPointToLatLng( point );
}

Add 'onmousemove' event listener on map's div element, then pass mouse position related to div's top-left corner.

UPDATE: DEMO (Tested on Chrome)

这篇关于由Google地图绘制的矩形DrawingManager不会触发mousemove事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！