Google maps 如果lat/long上有多个标记，如何旋转地图标记

我有一组4个标记点，所有标记点的纵横比都完全相同。（同一街道地址内的不同办公室）

我使用的是google maps api v3，有几个实例需要在同一lat/long上绘制多个标记（即：不同的企业，但在同一栋建筑的不同套房中）

我如何才能在N/S/E/W方向上旋转每个标记的自定义标记图标。（放大到x缩放级别以上时，所有标记的默认值均为北

/* update marker positions on each change of zoom level */
adjustLat = fComputeAdjustmentLat(zoomlevel);  
adjustLng = fComputeAdjustmentLng(zoomlevel);
/* iterate through markers. For each marker m: */   
m.setPosition( 
    google.maps.LatLng( 
        m.original.lat() + m.latOffset*adjustLat, 
        m.original.lng() + m.latOffset*adjustLng 
    )
);

---

如果需要，我可以发布用于地图绘制的js。

我找到了谷歌地图V3的两个扩展：和 两者都可以将图像DOM元素作为内容处理，然后我可以通过jQuery进行旋转

这甚至可以在旋转后不重新设置标记的图像的情况下工作

或

最好的跨浏览器方式是创建具有不同角度标记的精灵，并根据角度改变标记的大小属性

---

另一种非跨浏览器的方式是使用CSS3转换，您可能需要创建一个自定义覆盖来实现这一点。或者，使用画布绘制地图。但是，您不会获得用于捕获单击事件的dom元素。

我可以想出一种方法来解决这个问题。我可以想出另外两种方法解决更高层次问题的方法：如何使具有非常近的横向/纵向位置的多个标记可见

旋转标记

假设您从标记数据列表开始：lat/long值和一些其他数据（此处为

text

）。一些lat/long值相同或足够接近，因此没有区别

markerLatLngs = [
  {lat: 49.010, lng: -133.00, text: "123 Main St #101"},
  {lat: 49.010, lng: -133.00, text: "123 Main St #105"},
  {lat: 49.020, lng: -133.13, text: "246 Cambie St"}
];

您有一个自定义标记，让我们称其图标和阴影为

myIcon

和

myShadow

myIcon   = google.maps.MarkerImage(...);
myShadow = google.maps.MarkerImage(...);

制作图标和阴影图形的三个修改版本，分别旋转90°、180°和270°。将四组标记图像捆绑在两个四元素阵列中：

myIcon90    = google.maps.MarkerImage(...);
myShadow90  = google.maps.MarkerImage(...);
myIcon180   = google.maps.MarkerImage(...);
myShadow180 = google.maps.MarkerImage(...);
myIcon270   = google.maps.MarkerImage(...);
myShadow270 = google.maps.MarkerImage(...);

myIcons   = [myIcon, myIcon90, myIcon180, myIcon270];
myShadows = [myShadow, myShadow90, myShadow180, myShadow270];

现在，处理标记数据列表，为每个标记数据分配一个方向字段。您可以在页面内的JavaScript中执行此操作，但最好在首先生成标记列表的代码中执行此操作。给定lat/long的第一个条目的方向值为0。下一个为1，下一个为2，依此类推打开。不同lat/long的条目的方向值为0

有很多方法可以完成此任务。您可以按纬度和经度对列表进行排序，以便相同的值聚集在一起。您可以执行蛮力二次搜索，将每个条目与后面的每个条目进行比较。您可以执行复杂的操作（参见问题标签和）.请记住，比较实数是否完全相等通常容易出错

在任何情况下，结果都是标记数据的修改列表，并添加了方向

markerLatLngs = [
  {lat: 49.010, lng: -133.00, text: "123 Main St #101", orientation: 0},
  {lat: 49.010, lng: -133.00, text: "123 Main St #105", orientation: 1},
  {lat: 49.020, lng: -133.13, text: "246 Cambie St", orientation: 0}
];

在代码中为列表中的每个条目创建一个标记时，可能会有如下调用：

...
m = new google.maps.Marker({
    position: google.maps.LatLng( 
                  markerLatLngs[i].lat, markerLatLngs[i].lng
              ),
    icon:     myIcon, 
    shadow:   myShadow, 
    ...});
...

更改此代码以使用

方向

字段选择适当的图标和阴影：

...
m = new google.maps.Marker({
    position: google.maps.LatLng( 
                  markerLatLngs[i].lat, markerLatLngs[i].lng
              ),
    icon:   myIcons[markerLatLngs[i].orientation], 
    shadow: myShadows[markerLatLngs[i].orientation], 
    ...});
...

上面的代码都是伪代码，所以在使用前必须对其进行润色，但希望它能让人明白这一点

标记聚类器

第二种方法不旋转标记图标，但提供了一种解决更高级别问题的方法，即如何使具有非常近的横向/纵向位置的多个标记可见

这是为了使用实用程序库。它允许您为非常接近的标记集显示一个集合标记（例如，带有列出所有包含标记信息的信息窗口的标记）。有关详细信息，请参阅

位置偏移

解决更高层次问题的第三种方法是在距离太近的标记位置引入小的纬度和经度偏移量。结果将是大量密集的标记，而不是同一位置的多个标记

“小偏移量”有多大？这是缩放级别的函数。要获得四个像素的偏移量，例如，缩放级别8的纬度偏移量是缩放级别9的两倍。您可以忽略这一点，只需使用偏移量lat/longs生成标记列表，当放大到足够大时，偏移量lat/longs将具有可见的间隔：

markerLatLngs = [
  {lat: 49.010, lng: -133.00, text: "123 Main St #101"},
  {lat: 49.010, lng: -132.95, text: "123 Main St #105"}, 
                   /* ^^^^^^   longitude offset +0.05 */
  {lat: 49.020, lng: -133.13, text: "246 Cambie St"}
];

或者，您可以为每个列表条目生成以整数单位表示的latOffset和lngOffset值，并根据缩放级别计算单个单位的纬度和经度调整。您需要将偏移量存储在

标记选项

字典中（请参见）

然后，每次更改缩放级别（需要更新纬度和经度位置调整）时，迭代每个标记。根据原始偏移乘以调整因子（缩放级别的函数），计算新位置

/* update marker positions on each change of zoom level */
adjustLat = fComputeAdjustmentLat(zoomlevel);  
adjustLng = fComputeAdjustmentLng(zoomlevel);
/* iterate through markers. For each marker m: */   
m.setPosition( 
    google.maps.LatLng( 
        m.original.lat() + m.latOffset*adjustLat, 
        m.original.lng() + m.latOffset*adjustLng 
    )
);

这有点复杂

---

同样，这只是伪代码，在使用前必须对其进行润色。也许这三种方法中的一种对您和未来的读者都适用。

谢谢Jim，我从来没有想到过按lat/long排序并以这种方式应用标记旋转。您有这样做的示例吗？