多个地图不能为谷歌地图工作

Multiple maps not working for Google maps

本文关键字：谷歌地图 工作 不能 地图      更新时间：2023-09-26

我有一些jquery(下面)创建多个映射在窗口加载。然而，映射有一些奇怪的行为，但没有错误。

问题是当地图加载时，它们在地图上都有相同的位置，即使设置了多个不同的lng和lats。

下面是创建地图的代码和其中一个地图框的一些示例html。

奇怪的是，地图上有相同的位置，但没有错误。有没有人经历过这种情况，或者知道为什么会发生这种情况?

欢呼。

Js:(假设它被称为onload并且设置了一些空白全局数组)

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]);
        });
    }
};

一个地图的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>

如果您使用相同的代码发布，您将获得相同的经度和纬度值:

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

我尝试在同一页面上初始化2个不同的地图，它工作正常

相关文章：