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

Question

我正在努力实现与foursquare的地图提示相同的功能 在询问之前让我解释一下我做的家庭作业以及我是如何被困的。 这背后的想法是使用具有特定颜色的图层放置地图，然后将图像移动到标记的位置。

我的问题是，如何在px中获得标记的绝对位置，以便将第二张图像移动到标记的确切中心？

我仍然没有巨大的流量所以，我会坚持使用Googlemaps，但是如何在Google地图中滚动地图，是否可以在谷歌地图中实现？或者它是openmaps独有的吗？

Answer 1

恕我直言您可以简单地使用CSS组合来完成它：http://jsfiddle.net/fkw5xfov/3/

线索在这里：

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

所以解释一下：

我用border-radius: 50%创建了div - nice＆amp;有用的，然后我添加了rgba()颜色的大边框，最后我将其定位为相对位置。

导入并将shadow图层放在其他div内限制任何奇怪的骚扰＆amp;定位效果

当然作为背景您可以拥有任何东西。它可以是图像，谷歌地图div容器等。规则是相同的，你必须记住每个容器的位置。

关于将LatLon位置转换为Px，这里是good article