Javascript 在何处插入-google.maps.event.trigger（映射“resize”）；_Javascript_Google Maps_Google Maps Api 3

Javascript 在何处插入-google.maps.event.trigger（映射“resize”）；

javascript google-maps google-maps-api-3

Javascript 在何处插入-google.maps.event.trigger（映射“resize”）；,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,在搜索之后，很多人建议使用这个google.maps.event.triggermap“resize”；隐藏div的解决方案，谷歌地图正确渲染。到目前为止，只有三分之一的地图显示和其余部分是灰色的。我已经尝试在每一行插入此代码进行检查。没用。有人能帮我吗。。我不知所措！！这是我的js $("#1").on("click",function(){ var map; mapProp = { center:new google.maps.LatLng(40.73,

在搜索之后，很多人建议使用这个google.maps.event.triggermap“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>

之后：

marker.setMap(map);

唯一的问题是，我的位置有点不对劲。必须放下才能看到标记。

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

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

google.maps.event.addListenermap，idle，函数{google.maps.event.triggermap，'resize'；}；如果我把上面的代码放在marker.setMapmap之后，它似乎可以工作；唯一的问题是，地图从屏幕中央脱落。this.map.setZoom this.map.getZoom-1；this.map.setZoom this.map.getZoom+1； };如何使用this.map.setZoom this.map.getZoom+1；}？不管怎样，结果都是一样的。我无法重现您的问题，如果您可以创建JSFIDLE，我可以更深入地挖掘。通常发布的标记无效，请选择fx。这可能会导致一些副作用，我已经解决了。非常感谢你抽出时间。。

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