多個地圖不適用於 Google 地圖

Question

我有一些 jquery（下）在 window 負載上創建多個地圖。 然而，地圖有一些奇怪的行為，但沒有錯誤。

問題是當地圖加載時，它們在 map 上都有相同的位置，即使設置了多個不同的 lng 和 lats。

下面是創建 map 和其中一個地圖框的一些示例 html 的代碼。

奇怪的是地圖有相同的位置，但沒有錯誤。 有沒有人經歷過這種情況或知道為什么會這樣。

干杯。

Js：（假設這被稱為 onloand 並且設置了一些空白的全局 arrays。）

var maps_boxes = {
    initialise: function() {
        $('.a_map').each(function(index) {
            var map_box = $(this);
            var map_id = map_box.find('.the_map').attr('id');
            var lat = map_box.find('.lat').val();
            var lng = map_box.find('.lat').val();

            lat_lngs[index] = new google.maps.LatLng(lat,lng);          

            options[index] = {
              zoom: 4,
              center: lat_lngs[index],
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            maps[index] = new google.maps.Map(document.getElementById(map_id), options[index]);

        });
    }
};

一個 map 的樣品 html：

<div class="a_map">
  <form class="map_data" >
    lng:<input class="lng" type="text" value="0" /><br />
    lat:<input class="lat" type="text" value="10" />
  </form>
  <div id="map_xxxxx" class="the_map" ></div>
</div>

Answer 1

如果您使用發布的相同代碼，您將獲得相同的緯度和經度值：

    var lat = map_box.find('.lat').val();
    var lng = map_box.find('.lat').val();

我嘗試在同一頁面上初始化 2 個不同的地圖，它工作正常。