Question

我刚刚开始使用谷歌地图API的新体验。我想知道它是如何工作的，我通常在论坛上理解或找到我的答案。也许我错过了什么？中心不工作。 Google地图标记始终显示在左上角请帮我，提前谢谢！

JS代码：

    var locations = [
      ['<h4>Akouda</h4>', 35.825603, 10.608394999999973],
      ['<h4>Coogee Beach</h4>', 35.874674, 10.571809],
      ['<h4>Hammem Sousse</h4>', 35.886399, 10.591507],
      ['<h4>Kalaa Kebira</h4>', 35.869824, 10.535237]      
    ];

    // Setup the different icons and shadows
    var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

    var icons = [
      iconURLPrefix + 'red-dot.png',
      iconURLPrefix + 'green-dot.png',
      iconURLPrefix + 'blue-dot.png',
      iconURLPrefix + 'orange-dot.png',
      iconURLPrefix + 'purple-dot.png',
      iconURLPrefix + 'pink-dot.png',      
      iconURLPrefix + 'yellow-dot.png'
    ]
    var iconsLength = icons.length;
    var latlng = new google.maps.LatLng(35.874674, 10.571809);
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(35.874674,10.571809),
        zoom: 10,     

      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
         position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });



    var markers = new Array();

    var iconCounter = 0;

    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));

      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= iconsLength) {
        iconCounter = 0;
      }
    }

    $('#myMapModal').on('shown.bs.modal', function () {
    google.maps.event.trigger(map, 'resize');

});
map.setCenter(new google.maps.LatLng(35.874674,10.571809));



    map.setZoom(10);

HTML

    <a href="#myMapModal" data-toggle='modal'> <button onclick="resize();" style="text-align: right;"  class="btn btn-default">Voir sur carte</button></a>
<div class="modal fade" id="myMapModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div id="map" style="width: 500px; height: 400px;"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

Answer 1

通过第二个参数传递一些选项，你特别希望使用'center'属性。

var mapOptions = { center: new google.maps.LatLng(53.162172, -1.866389), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }

map = new google.maps.Map(mapCanvas, mapOptions)

Answer 2

只需删除new google.maps.LatLng并将其更改为

即可

var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat:35.874674, lng:10.571809},
        zoom: 10,

Answer 3

您需要在显示地图后设置地图的中心并且具有大小（零大小的地图/ div的中心位于左上角）。将jQuery事件处理程序创建移动到initialize函数中，使mapOptions在范围内，然后在触发resize事件后调用map.setCenter。

updated fiddle

＆＃13;
＆＃13;
google.maps.event.addDomListener(window, 'load', initialize); function initialize() { var mapCanvas = document.getElementById('map'); var mapOptions = { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) marker = new google.maps.Marker({ position: map.getCenter(), map: map }) $('#contact').on('shown.bs.modal', function() { google.maps.event.trigger(map, "resize"); map.setCenter(mapOptions.center); }); }
＆＃13;
html, body { height: 100%; margin: 0; padding: 0; } #map { height: 300px; width: 600px; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script> <a class="openmodal" href="#contact" data-toggle="modal" data-id="Peggy Guggenheim Collection - Venice">Contact</a> <div class="modal fade" id="contact" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content" id="back"> <div class="modal-header"> <h4>Contact</h4> </div> <div class="modal-body"> <div id="map"></div> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal">Close</a> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Google地图中心选项无效

3 个答案: