即使使用标记也为 JQuery UI 地图定义不同的默认缩放

Question

我一直在网上寻找这个问题的答案，但基本上，我希望下面的代码能够准确地完成它正在做的事情......

        $(function() {

            $('#map_canvas').gmap().bind('init', function(ev, map) {
                $('#map_canvas').gmap('addMarker', { 'position': '57.7973333,12.0502107', 'bounds': true }).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', { 'content': '134 Some Street Name, postcode and such' }, this);
                });
            });

        });

    </script>

然而，这个地图视图是放大的，我希望能够控制它但将其保持在范围内。我尝试过使用：

$('#map_canvas').gmap('option', 'zoom', 7);

下面的功能，但它没有任何不同。在用户单击或拖动任何内容之前，如何控制地图的默认缩放？

谢谢！

Answer 1

在构造函数 gmap({zoom:7}) 中设置缩放。如果您在 addMarker 方法中将bounds 属性设置为 true，它将覆盖之前在任何地方设置的任何缩放（通过选项或在构造函数中）。设置缩放并将边界设置为 false 的示例：

$('#map_canvas').gmap({'zoom':7, 'center': '57.7973333,12.0502107'}).bind('init', function(ev, map) {
                $('#map_canvas').gmap('addMarker', { 'position': map.getCenter(), 'bounds': false}).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', { 'content': '134 Some Street Name, postcode and such' }, this);
                });
            });

Answer 2

$(function() {
      $('#map_canvas').gmap().bind('init', function(ev, map) {
           $('#map_canvas').gmap('addMarker', { 'position': '57.7973333,12.0502107', 'bounds': false }).click(function() {
           $('#map_canvas').gmap('openInfoWindow', { 'content': '134 Some Street Name, postcode and such' }, this);
            });
      });
      $('#map_canvas').gmap({'zoom': someNumber});
});

每当添加标记时，请将“边界”更改为 false。然后您可以设置您喜欢的任何缩放级别。

Answer 3

我发现最简单的方法是进入 jquery.ui.map.js 并更改那里的默认设置。这很容易。我把我的设置为15。

options: {
center: (google.maps) ? new google.maps.LatLng(0.0, 0.0) : null,
mapTypeId: (google.maps) ? google.maps.MapTypeId.ROADMAP : null,
zoom: 15
},