如何像 Foursquare 一样将 LatLon 转换为 Px：技巧地图

Question

我正在尝试实现与 foursquare's tip of map 相同的东西在提问之前，让我解释一下我所做的作业以及我是如何被困住的。这背后的想法是放一张带有特定颜色图层的地图，然后将下面的图像移动到标记的位置。

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

我仍然没有很大的流量，所以我会坚持使用 Googlemaps，但是如何在 google 地图中滚动地图内部，在 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 - 很好用，然后我用 rgba() 颜色添加了大边框，最后我用相对位置定位了它。

重要的是将此 shadow 层置于其他 div 层内，以限制任何奇怪的显示和定位效果

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

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

如何像 Foursquare 一样将 LatLon 转换为 Px：技巧地图

How to convert LatLon to Px like on Foursquare: the Map of tips

html

javascript

css

google-maps

google-maps-api-3