Question

点击后我有一个按钮会执行ajax并将html文件加载到具有这行代码的bootstrap模式。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap"
    async defer></script>

当我再次点击该按钮时，我收到此错误。

您已在此页面上多次添加Google Maps API。这可能会导致意外错误。

如何防止googlemaps脚本加载两次？

这是我的代码

<div class="modal fade" id="trackMapModal" role="dialog"></div>

<button class='pull-right track' id="2"><strong>Track it!</strong></button>
<script>
$("#trackMapModal").appendTo("body");
$(".track").click(function(){
    var id = this.id;
    $.ajax({
        type:"POST",
        url:"<?=base_url("/track/viewMap")?>",
        dataType:"html",
        data: {id : id},
        success:function(res){
            $("#trackMapModal").html(res).modal("show");
        }
    })
});
</script>

在/ track / viewMap，它将返回一个存在此脚本的地图

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap"
async defer></script>

该脚本将具有在加载时运行initMap（）函数的回调。

/ track / viewMap 代码

function viewMap(){
    $id = $this->input->post("id,true);
    $data["id"]=$id;
    $data["loc"]["dest"]=array("lat"=>51.1124587,"lng"=>42.1245457);

    $this->load->view("/MAIN/mapModal",$data);
}

在名为 / MAIN / mapModal

的视图上

<div id="map"></div>
<script>
function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var marker2;
    var map = new google.maps.Map(document.getElementById('map'),{
        center: {lat: <?=$loc["lat"]?>, lng: <?=$loc["lng"]?>},zoom:17
    });
    marker2 = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    marker2.setMap(map);

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap" async defer></script>

Answer 1

您可以为脚本标记指定一个ID，并使用javascript添加它（如果它尚未存在）。您还必须检查谷歌地图API是否已加载。类似的东西：

function initMap(){
   // your map set up scripts in here
    ...
}

if(window.google && window.google.maps){
    // the map API is already be loaded (from a previous button click, maybe)
    initMap();

} else if(!document.getElementById('google-map-script')) {
    // the script tag is not present so add it to the DOM
    var scriptTag = document.createElement('script');
    scriptTag .id = 'google-map-script';
    scriptTag .src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(scriptTag);
}

Answer 2

我建议在模态之外加载地图。

加载地图（您想要的任何地方）：

<div id="map" style="height:300px; width:895px;" align="center">

在<div class="modal-body">

下的模态内显示地图

<div class="modal-fade">
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
   </div>
   <div class="modal-body" id='add'>

  <div class="map"></div>
and the rest of your modal body here...

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap"
async defer></script>

在你的javascript中：

map =  new google.maps.Map(document.getElementById("map"),mapOptions);
setTimeout(function(){
        $('.map').append($("#map").css("margin-top","0px").get(0));
        },500);

防止googlemaps javascript加载两次

2 个答案: