Javascript 地图在检查元素或缩放后工作

这是我们网站上出现的奇怪的事情，关于缩放或检查地图上的元素

这是网站，点击位置标记后，地图首先不可见，但在查看地图后，标记显示在屏幕上。 站点URL

下面是脚本和源代码

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98">
</script>

<script type="text/javascript">
<?php
//first location
if(isset($results[0]['latitude']))
{
    $latitude1=$results[0]['latitude'];
    $longitude1=$results[0]['longitude'];
    $location1="['loan 1',".$latitude1.",".$longitude1.",'business 1']";

}
else 
{
    $location1=$latitude1=$longitude1='';
}
//second location
if(isset($results[1]['latitude']))
{
    $latitude2=$results[1]['latitude'];
    $longitude2=$results[1]['longitude'];
    $location2=",['loan 2',".$latitude2.",".$longitude2.",'business 2']";
}
else 
{
    $location2=$latitude2=$longitude2='';
}
//thired location
if(isset($results[2]['latitude']))
{
    $latitude3=$results[2]['latitude'];
    $longitude3=$results[2]['longitude'];
    $location3=",['loan 3',".$latitude3.",".$longitude3.",'business 3']";
}
else 
{
    $location3=$latitude3=$longitude3='';
}
//fourth location
if(isset($results[3]['latitude']))
{
    $latitude4=$results[3]['latitude'];
    $longitude4=$results[3]['longitude'];
    $location4=",['loan 4',".$latitude4.",".$longitude4.",'business 4']";
}
else 
{
    $location4=$latitude4=$longitude4='';
}
//fifth location
if(isset($results[4]['latitude']))
{
    $latitude5=$results[4]['latitude'];
    $longitude5=$results[4]['longitude'];
    $location5=",['loan 5',".$latitude5.",".$longitude5.",'business 5']";
}
else 
{
    $location5=$latitude5=$longitude5='';
}
//sisth location
if(isset($results[5]['latitude']))
{
    $latitude6=$results[5]['latitude'];
    $longitude6=$results[5]['longitude'];
    $location6=",['loan 6',".$latitude6.",".$longitude6.",'business 6']";
}
else 
{
    $location6=$latitude6=$longitude6='';
}
//seventh location
if(isset($results[6]['latitude']))
{
    $latitude7=$results[6]['latitude'];
    $longitude7=$results[6]['longitude'];
    $location7=",['loan 7',".$latitude7.",".$longitude7.",'business 7']";
}
else 
{
    $location7=$latitude7=$longitude7='';
}
//eighth location
if(isset($results[7]['latitude']))
{
    $latitude8=$results[7]['latitude'];
    $longitude8=$results[7]['longitude'];
    $location8=",['loan 8',".$latitude8.",".$longitude8.",'business 8']";
}
else 
{
    $location8=$latitude8=$longitude8='';
}
//nineth location
if(isset($results[8]['latitude']))
{
    $latitude9=$results[8]['latitude'];
    $longitude9=$results[8]['longitude'];
    $location9=",['loan 9',".$latitude9.",".$longitude9.",'business 9']";
}
else 
{
    $location9=$latitude9=$longitude9='';

}
?>
var locations = [<?php echo $location1.$location2.$location3.$location4.$location5.$location6.$location7.$location8.$location9 ?>];

  function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(<?php echo $latitude1.','.$longitude1; ?>),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map,locations)
        google.maps.event.addListenerOnce(map, 'idle', function () {
            google.maps.event.trigger(map, 'resize');
        });
    }



  function setMarkers(map,locations){

      var marker, i

for (i = 0; i < locations.length; i++)
 {  

 var loan = locations[i][0]
 var lat = locations[i][1]
 var long = locations[i][2]
 var add =  locations[i][3]

 latlngset = new google.maps.LatLng(lat, long);

  var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
        });
        map.setCenter(marker.getPosition())


        var content = "Latitude: " + lat +  '</h3>' + "Longitude: " + long     

  var infowindow = new google.maps.InfoWindow()

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
        return function() {
           infowindow.setContent(content);
           infowindow.open(map,marker);
        };
    })(marker,content,infowindow)); 

  }

  }



  </script>

var位置=[]；
函数初始化（）{
变量myOptions={
中心：新的google.maps.LatLng（），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“默认”），
肌肽）；
设置标记（地图、位置）
google.maps.event.addListenerOnce（映射，'idle'，函数（）{
google.maps.event.trigger（映射，'resize'）；
});
}
功能设置标记（地图、位置）{
变量标记
对于（i=0；i

下面是HTML代码

<div id="map_govinda">
        <div id="default"></div>
    </div>

---

以下是位置，lat long来自数据库。

当地图画布不可见时，我总是避免初始化地图。
通常，这可以通过触发器（映射“调整大小”）来解决，你已经试过了

尝试以下操作：仅在单击“map.png”后初始化地图

因此，请删除以下内容：body onload=“initialize（）”，然后尝试以下操作

$("#go_map").click(function(){
    $("#cate_list_view").hide(1000);
    $("#go_map").hide(1000);
    $("#map_govinda").show(1000, function() {
      // we'll wait until the canvas for the map is fully visible
      if(! map) {  // this will only trigger once
        initialize();
      }
    });
    $("#go_list").show(1000);
});

var map;  // put the map object somewhere global, so we can access it anywhere

function initialize() {
  var myOptions = {
    center: new google.maps.LatLng(31.779966,35.221211),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("default"), myOptions);
  setMarkers(map,locations);
}

尝试添加css height

#您的#map_id{height:400px；}

，并检查$（#map_govinda）的可能重复项。show（1000，function（）{//如果（！map）{//这只会触发一次initialize（）；}，我们将等待贴图画布完全可见）；这种逻辑是有效的