如何像在Foursquare上一样将LatLon转换为Px：提示地图

Question

I'm trying to achieve the same thing as foursquare's tip of map before asking let me explain the homework I did and how I got stucked. The idea behind this was to put a map with a layer with a certain color, then move the image below to the position of the marker.

My questions are, how do you get the absolute position of the marker in px, in order to move the second image to the exact center of the marker?

I still don't have a huge traffic so, I'll stick to Googlemaps, but how do you scroll inside the map in google maps, is it achievable in google maps? or is it exclusive to openmaps?

Answer 1

IMHO You can simply use combination of CSS to do it: http://jsfiddle.net/fkw5xfov/3/

Clue is here:

#shadow {
    position: relative;
    left: -1950px;
    top: -1950px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 2000px rgba(0,0,0,.4) solid; 
}

So to explain it:

I created div with border-radius: 50% - nice & useful, then I add big border with rgba() color and at end I positioned it with position relative.

It's importand to get this shadow layer inside other div which limit any strange sceolling & positioning effects

Of course as a background You can have anything. It can be image, a google maps div container etc. Rules are the same and You have to mostly remember about how each of containers is positioned.

And about converting LatLon position to Px here is a good article