Question

我正面临谷歌地图的问题。实际上我有一个列表页面，其中每一行都有地图按钮，以显示该特定行的纬度/经度的地图。

我正在使用jQuery ajax调用来打开一个div

的弹出窗口

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
function showMap(id) {
   $("#map .modal-body").load("/showmap?id=" + id, function() { 
      $("#map").modal("show");
      return false; 
   });
}

虽然showmap模板有地图显示代码，如

loadMap();

function loadMap() {

    var latitude = <?php echo $latitude ?>;
    var longitude = <?php echo $longitude ?>;

    map = new google.maps.Map(document.getElementById('map-body'), {
        zoom: 4,
        center: {lat: 21.0000, lng: 78.0000}
    });

    var myLatlng = new google.maps.LatLng(latitude, longitude);
    var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Location'
        });

    $('#map').on('shown.bs.modal', function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
}

工作正常。但是为了减少主页面加载时间，我需要在生成问题的弹出窗口中包含映射脚本包含，因为后续映射库未加载且代码错误。

我找到了从主页中删除包含的解决方案，并在popup中添加了以下代码，用于定义地图代码的回调（在所有libs加载后延迟执行我的地图代码所需）

$(document).ready(function() {
    $.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&callback=loadMap", function() {
        // No code here
     });
});

但后来我得到谷歌地图多重包含错误。 “您已在此页面上多次添加Google Maps API。这可能会导致意外错误。”

如果有人知道如何解决它？

Answer 1

看起来不是一个非常真实的解决方案。但是我做了一次黑客攻击。

首先我将代码移回我的视图文件并将回调设置为cutom函数而不是像

这样的map函数

$(document).ready(function() {
    $.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&callback=checkLoading", function() {
        // No code here
    });
});
var mapEnabled = false;

function checkLoading {
    mapEnabled = true;
}

在Map Loading函数中，仅在mapEnabled为true时添加一个检查，然后加载具有map加载代码/ ui的弹出窗口。

function loadMap(id) {
    if(mapEnabled == true) { 
        $("#map .modal-body").load("/showmap?id=" + id, function() { 
            $("#map").modal("show");
            return false; 
        });
    } else {
        $('.top-msg').html('<div class="alert alert-info alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>  Map is loading... Please wait and click again later.</div>');
    } 
}

在bootstrap模式中加载动态纬度/经度上的谷歌地图

1 个答案: