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

Question

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

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

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

我试图在 photoshop 中使图像本身偏离中心，但没有成功。我查看了 google maps api，但没有弹出任何内容。

关于如何实现这一点有什么想法吗？

Answer 1

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

pixelCoordinate = worldCoordinate * 2zoomLevel

Get the worldCoordinate of the click, calculate the pixelCoordinate, add the offset , calculate the new worldCoordinate and you have the desired position.

You'll need two functions to convert LatLng's to Pixel(and vice versa):

fromLatLngToPoint() and fromPointToLatLng()

sample-function:

  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/