Question

这是一个奇怪的事情来到我们的网站，缩放或检查地图来的元素

这是网站，点击位置标记首先看不到地图，但在检查地图后，屏幕上显示标记。网站网址 https://allinfo.co.il/allin/index.php/website/searchBusiness/625#

以下是脚本和源代码

<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>

这是HTML代码

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

这是位置，lat-longs来自数据库。

Answer 1

当地图画布不可见时，我总是避免初始化地图通常这可以通过触发器（map，'resize'）...来解决，你已经尝试过了。

尝试此操作：仅在点击“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);
}

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

1 个答案: