谷歌地图 - 将光标更改为图像拾取偏移

Question

我已将谷歌地图光标更改为我自己的图像。这个图像有一个独特的点。该网站允许人们单击地图上的某个位置，以在他们选择的确切纬度/经度上创建一个标记。

问题在于，由于图像有一个特定的点（图像的底部中心），所以每个人都认为该点在哪里，就是标记所在的位置。相反，标记位于图像的左上角，并且偏离了相当多的像素。

我需要一种偏移图像的方法，这样当点击发生时，它恰好发生在图像点所在的位置，而不是左上角的自动拾取点。

我曾尝试将图像本身放在 Photoshop 中的中心位置，但这并没有做到。我查看了 google maps api，但没有弹出任何内容。

关于如何实现这一点的任何想法？

Answer 1

您可以在https://developers.google.com/maps/documentation/javascript/maptypes#PixelCoordinates找到实现它的基本公式

pixelCoordinate = worldCoordinate * 2zoomLevel

获取点击的世界坐标，计算像素坐标，加上偏移量，计算新的世界坐标，你就得到了想要的位置。

您需要两个函数将 LatLng 转换为像素（反之亦然）：

fromLatLngToPoint() and fromPointToLatLng()

示例函数：

  google.maps.event.addListener(map, 'click', function(e){      
       //assume a cursor with a size of 22*40

   var  //define the anchor, the base(top-left) is 0,0
        //bottom middle will be 11,40
       anchor         = new google.maps.Point(11,40),

        //the map-projection, needed to calculate the desired LatLng
       proj           = this.getProjection(),

        //clicked latLng
       pos            = e.latLng;

        //the power of the map-zoom
       power          = Math.pow(2,map.getZoom()),

        //get the world-coordinate
        //will be equal to the pixel-coordinate at zoom 0
       point          = proj.fromLatLngToPoint(pos),

        //calculate the new world-coordinate based on the anchor
       offsetPoint    = new google.maps.Point(
                                        (point.x*power+anchor.x)/power,
                                        (point.y*power+anchor.y)/power
                                       ),
        //convert it back to a LatLng
       offsetPosition = proj.fromPointToLatLng(offsetPoint);

       //done

       new google.maps.Marker({ position:offsetPosition, map:map});
  });

演示：http://jsfiddle.net/doktormolle/NYh7g/