Question

搜索完毕后，很多人都建议使用此google.maps.event.trigger(map, 'resize'); 隐藏div的解决方案，谷歌地图正确渲染。截至目前，只有三分之一的地图显示和休息是灰色的。我已尝试在每行中插入此代码进行检查。什么都行不通有些人可以帮助我......我一无所知！这是我的js

$("#1").on("click",function(){
            var map;
     mapProp = { center:new google.maps.LatLng(40.73, -74.1841),
     zoom:17,
     mapTypeId:google.maps.MapTypeId.ROADMAP
      };

    map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    mapProp = new google.maps.LatLng(40.73, -74.1841)

     var marker = new google.maps.Marker({
     position: mapProp,
     map: map,
     icon: 'img/marker.png',

     });

      marker.setMap(map);
     });
google.maps.event.addDomListener(window, 'load');

这是我的HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />


    <link rel="stylesheet" type="text/css" href="css/direction.css"/>
    <link rel="stylesheet" type="text/css" href="css/transitions.css"/>

    <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="css/transitions.js"></script>

    <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/apijs?v=3.exp&sensor=false"></script>


</head>
<body>

   <div id="Home">

<div id="picture"> <img src="img.jpg"  alt="logo"> </img></div>     

<label><div id="select">Select</label></div>
 <ul id="list"><hr>
    <li id="b1" >Mall</li><hr>
    <li id="b2" > city</li><hr>
        <li id="b3" > office</li><hr>
     <li id="b4" >Park</li><hr>
     <li id="b5" >school</li><hr>
         <li id="b6" > theater</li><hr>
    </ul>

</div>

<div id="showmap">
        <div  class="back" id="Back">Back to Names</div>
   <div id="googleMap"> </div>

</div>

        <script type="text/javascript" src="js/scripts.js"></script>
  </body>

</html>

溶液 @ Andrei Beziazychnyi

UpDate 解决所有问题

 google.maps.event.addListener(map, "idle", function(){
            var center = map.getCenter();
            google.maps.event.trigger(map, 'resize'); 
            map.setCenter(center);

            });

之后：

marker.setMap(map);

唯一的问题是，我的位置很少。不得不放下去看标记。

Answer 1

我知道的最佳选择是使用以下代码：

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

我在哪里插入 - google.maps.event.trigger（map，'resize'）;

1 个答案: