Question

我使用了名为gmaps4rails的GEM，它在某种程度上做得很好，但问题是我无法将地图居中。它显示在角落里。

我想要做的是，将MASSACHUSETTS作为中心显示其中有多个引脚。

我也在使用Tabs，他们现在正在加载它们，但无法弄清楚如何调整以将其设置为MASSACHUSET中心。

这是我的代码：

<script src="https://maps.googleapis.com/maps/api/js?key=KEYGOESHERE" type="text/javascript"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
<script>
  $(document).ready(function () {
    var map_center = new google.maps.LatLng('42.0574342', '-72.8422761');
    var handler = Gmaps.build('Google');
    handler.buildMap({
          provider: {
            disableDefaultUI: true,
            zoomControl: true,
            zoom: 12,
            center: map_center
          },
          internal: {
            id: 'map'
          }
        },
        function () {
          var markers = handler.addMarkers(<%=raw @retailers.to_json %>);
          handler.bounds.extendWith(markers);
          handler.fitMapToBounds();
        }
    );
    $('.nav-tabs').on('shown.bs.tab', function () {
      google.maps.event.trigger(window, 'resize', {});
      var reCenter = new google.maps.LatLng('42.0574342', '-72.8422761');
      handler.setCenter(reCenter);
    });
  });
</script>

和Div：

<div style='width: 825px; height: 350px;'>
<div id="map" style='width: 825px; height: 350px;'></div>
</div>

以下是示例图片：

以下是演示：

＆＃13;

  var map_center = new google.maps.LatLng(42.0574342, -72.8422761);
  var handler = Gmaps.build('Google');
  handler.buildMap({
      provider: {
        disableDefaultUI: true,
        zoomControl: true,
        zoom: 12,
        center: map_center
      },
      internal: {
        id: 'map'
      }
    },
    function() {
      var markers = handler.addMarkers([{
        "lat": "42.3420564",
        "lng": "-71.1377384",
        "marker_title": "BRIX Wine Shop"
      }, {
        "lat": "42.3484068",
        "lng": "-71.1563419",
        "marker_title": "Bauer Wine \u0026 Spirits"
      }, {
        "lat": "42.3560102",
        "lng": "-71.1275915",
        "marker_title": "Boston Wine Exchange"
      }, {
        "lat": "42.3484068",
        "lng": "-71.1563419",
        "marker_title": "Bauer Wine \u0026 Spirits"
      }]);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    }
  );
  $('.nav-tabs').on('shown.bs.tab', function() {
    google.maps.event.trigger(window, 'resize', {});
    var reCenter = new google.maps.LatLng(42.0574342, -72.8422761);
    handler.setCenter(reCenter);
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVGMRkZg8rFSxoUspEiZmnaMRqT3WO8wU" type="text/javascript"></script>

<script src="https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>



<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>




<div style='width: 825px; height: 350px;'>
                        <div id="map" style='width: 825px; height: 350px;'></div>
                      </div>

＆＃13;

Answer 1

如果您使用地图Gmaps，我不知道您使用API的原因试试这个：

已编辑以添加一个从数组创建标记的循环（以及轻微更改）。

<div id="map"></div>

<script>
var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 9,
        center: {lat:42.25, lng: -71.80},   // Center of Massachusetts
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var coord_List = [
        {lat: 42.0574342, lng: -72.8422761},    // Your coords // A

        // Other coords just for the example.
        {lat:42.40115038362434, lng: -72.18292236328125},   // B    
        {lat:42.52474804234817, lng: -73.0535888671875},    // C    
        {lat:42.55914981211588, lng: -71.2957763671875},    // D
        {lat:42.116561350389006, lng: -71.4495849609375},   // E
        {lat:41.95949009892467, lng: -70.02410888671875}    // F
    ];

    // Marker letters
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var labelIndex = 0;

    for(i=0;i<coord_List.length;i++){
        new google.maps.Marker({
            position: coord_List[i],
            label: labels[labelIndex++ % labels.length],
            map: map
        });
    }
}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVGMRkZg8rFSxoUspEiZmnaMRqT3WO8wU&callback=initMap"></script>

注意我使用您的API密钥后跟回调此回调必须是地图创建功能的名称。

从我的第一个回答开始，我改变了：
zoom从14到9，最好查看所有马萨诸塞州您可能更喜欢8 ...（较低的数字是较高的海拔）
地图类型为ROADMAP，我认为最适合酒吧位置地图类型选项包括：ROADMAP，TERRAIN，SATELLITE和HYBRYD
而且我略微改变了“马萨诸塞州中心”的坐标，因为离开我的屏幕的岛屿。

你在评论中提到你在数据库中有coords ...
因此，让PHP生成这个coord_List数组 ;）

另外...... <head>需要这样做：

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">

<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
    cursor: pointer !important;
}
</style>

-------------
BUG FIX

由于您制作的坐标是这样的：

[
    {"lat":"42.0574342","lng":"-72.8422761"},    // Your coords // A

    // Other coords just for the example.
    {"lat":"42.40115038362434","lng":"-72.18292236328125"}, // B    
    {"lat":"42.52474804234817","lng":"-73.0535888671875"},  // C    
    {"lat":"42.55914981211588","lng":"-71.2957763671875"},  // D
    {"lat":"42.116561350389006","lng":"-71.4495849609375"}, // E
    {"lat":"41.95949009892467","lng":"-70.02410888671875"}  // F
]

您必须删除" 在设置标记的循环之前添加此循环：

for(i=0;i<coord_List.length;i++){
    coord_List[i].toString().replace(/\"/g, "");
    coord_List[i].lat = parseFloat(coord_List[i].lat);
    coord_List[i].lng = parseFloat(coord_List[i].lng);
    console.log(coord_List[i]);
}

其余的保持不变。

无法在引导程序垂直选项卡中设置地图中心

1 个答案: