谷歌地图、Ruby on Rails、一个标记的缩放级别

Question

我正在使用apneadiving / Google-Maps-for-Rails（非常棒的gem）添加谷歌地图支持。

然而，我发现一个小问题，很可能是我的错。当有多个标记时，auto_zoom效果很好。然而，当只有一个标记时，它会缩放到最大级别，这并不美观。

"zoom"只有在auto_zoom为false时才起作用，所以这不是我想要的。

因此，您可以使用“maxZoom”，但现在用户不能手动缩放超过该点，这也不是我想要的。

有没有解决方法？我的解释清楚吗？这是Google Maps API的限制吗？

谢谢...

- Enric Ribas

Answer 1

这种行为是由 Google Maps API 内置函数 auto_zoom 导致的。

解决方法之一是在 gmaps 方法中将其设置为 false：

<%= gmaps({
       "map_options" => { "auto_zoom" => false},
       "markers"     => { "data" => @json }
      })
%>

然后使用gmaps4rails_callback来满足您的需求（请确保至少安装了0.7.9版本）

<script type="text/javascript" charset="utf-8">
  function gmaps4rails_callback() {
    if (Gmaps4Rails.markers.length == 1) {
     //only one marker, choose the zoom level you expect
     Gmaps4Rails.map.setZoom(2);
    }
    else{
     //more than one marker, let's auto_zoom
     Gmaps4Rails.map_options.auto_zoom = true;
     Gmaps4Rails.adjust_map_to_bounds();
    }
  }
</script>

- apneadiving

---

你把这个回调函数放在哪里？是在视图中吗？如果是的话，具体放在哪里？ - pruett

@pruett：自从0.10.0以来，我稍微更改了API，可以在这里看到一个示例：http://stackoverflow.com/questions/6741452/how-to-get-the-id-field-and-send-to-the-view - apneadiving

@apneadiving：嗯...不太确定如何实现这个。我正在使用0.10.2版本，但似乎无法将缩放调整到最大缩放比例之外。我每页只有一个标记，并尝试像下面这样的简单解决方案，但它不起作用。你有什么想法吗？ - pruett

@apneadiving: 我正在尝试这个：<%= gmaps({ "map_options" => {"auto_adjust" => false, "auto_zoom" => false, "zoom" => 15 }, "markers" => {"data" => @json } }) %>但是似乎对我不起作用。我只是想将缩放设置为默认最大值以外的值。 - pruett

@pruett：请提出一个新问题：这可能对其他人有用。 - apneadiving

@apneadiving 不好意思 :) 我在这里发布了它: [https://dev59.com/oVnUa4cB1Zd3GeqPbISb] 谢谢你的帮助！ - pruett

Answer 2

我以稍微不同的方式实现了这一点，因为我知道我的地图上只会有一个标记。虽然我对Rails相对较新，但这种方法比在视图中使用JS感觉更加“清洁”。

我在模型中存储了lat和lng（在创建时由geokit编码），所以在视图中执行了以下操作：

<%= gmaps({
       "map_options" => {"auto_zoom" => false, "zoom" => 15, "center_latitude" => @listing.lat, "center_longitude" => @listing.lng },
       "markers"     => {"data" => @markers }
      })
%>

@markers是由blah.to_gmaps4rails创建的JSON，"listing"是我的模型。

- DaveStephens

---

是的，那个运作良好。但是，当我添加了多个标记时，我的问题就出现了。那么你需要执行上面的javascript解决方案。谢谢！ - Enric Ribas

Answer 3

谢谢，这对我很有帮助...

{"auto_zoom" => false, "zoom" => 15, "center_latitude" => @listing.lat, "center_longitude" => @listing.lng }, "markers" => {"data" => @markers } }) %>

- jimmi