Google Maps v3 API地圖未完全加載

Question

我正在構建一個應用程序，該應用程序將具有顯示附近餐館的地圖。

地圖會顯示出來，但是加載時間很長，並且從未真正加載完畢。

我的工作期限很短，我嘗試了各種解決方案，但都沒有碰到運氣。

有人請幫助！！！

參見下面的代碼：

    <!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Food & Drink</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>


<body>
  <div id="map" style="width: 360px; height: 300px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Little Shebas', 39.833691, -84.892375, 1],
      ['Roscoes Coffee Bar & Tap Room', 39.833891, -84.892130, 2],
      ['Ullerys Homemade Icecream', 39.834401, -84.889190, 3],
       ['Firehouse BBQ and Blues', 39.833630, -84.891887, 4],
      ['Tin Lizzie Cafe', 39.829140, -84.890857, 6]
      ['Joes Pizza', 39.834409, -84.889822, 5],
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 25,
      center: new google.maps.LatLng(39.830184, -84.893401),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

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

Answer 1

我無法確認您描述的行為。 一切似乎都正常，您的代碼看起來應該可以工作。

查看此代碼工作示例。 我玩了初始縮放級別並調整了中心。 您指定的中心實際上不在標記附近，而且縮放級別起初是如此之高，以至於我認為地圖沒有加載。

var center = new google.maps.LatLng(39.833691, -84.892375);

google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

Answer 2

我相信您的陣列中的問題。 查看chrome dev工具中的代碼，它顯示的locations數組包含5個元素（不是6個），其中第五個元素是undefined 。 您在第5個元素后缺少逗號，而在最后一個元素后有逗號。 嘗試訪問該未定義元素上的屬性會引發javascript異常，從而導致頁面無法執行。 另外，在初始縮放時，您未設置任何內容。 縮小將顯示帶有標記的地圖。 將地圖選項的初始縮放比例設置為14。

Google Maps v3 API地圖未完全加載

問題描述

2 個解決方案

解決方案1
1 2015-01-16 19:55:20

解決方案2
1 2015-01-16 20:01:07

Google Maps v3 API地圖未完全加載

問題描述

2 個解決方案

解決方案1 1 2015-01-16 19:55:20

解決方案2 1 2015-01-16 20:01:07

解決方案1
1 2015-01-16 19:55:20

解決方案2
1 2015-01-16 20:01:07