Firefox 4+ 下使用Client Offset取Google Map Marker 位置失效后使用MapCanvasProjection

Thu, Jul 14, 2011

开发中使用Google map api, 鼠标放到google map上一个marker时，需要弹出一个非google map提供的对话框，也就是不是在地图范围内弹出，也就是弹出的对画框会超出地图范围。 这时候需要获得到地图上marker的屏幕坐标，之前使用了给marker添加title的方法，然后通过jquery去定位这个marker, 当google改变了地图结构，变成canvas时候无法使用这个DOM节点查找的方法了，于是使用了另一种方法，marker.clientOffset.top来获取相对位置。

但是当升级Firefox到4+时候，发觉clientOffset失效了，在IE，chrome下没有问题，firefox的clientOffset确不跟随实际的地图拖动而对地图改变，于是开始寻找方法，也发觉很多人遇到了这个问题，或者说这是firefox的一个bug

终于找到了一个解决方案，本想自己写出通过经纬度坐标来计算屏幕坐标的公式，发觉用到了很多数学公式，寻找了googl map v3的api，发现还是有写好的api. overlay = new google.maps.OverlayView(); overlay.draw = function() {}; overlay.setMap(map); //x as lat, y as lng var containerPixel = overlay.getProjection().fromLatLngToContainerPixel(new google.maps.LatLng(x,y)); var divPixel = overlay.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(x,y));

http://www.william-map.com/20100416/1/map.htm Demo地址 http://code.google.com/apis/maps/documentation/javascript/reference.html#MapCanvasProjection google map v3 api