需要帮助谷歌地图方向面板在FancyBox中显示

Need help getting Google maps directionsPanel to display in a FancyBox

本文关键字：FancyBox 显示 帮助 谷歌地图 方向      更新时间：2023-09-26

我目前正在为一个网站开发一小部分功能。基本上，我想在页面上显示一个端口的地图，并允许用户在下面输入他们的地址，以便找到方向。一旦他们点击了"获取方向"链接，就会打开一个奇特的框，其中的内容是包含谷歌方向面板的div。

以下是我遇到的问题。-calcRoute（）函数调用链接的onClick。因此，div以前没有填充过。结果如何？第一次单击时，fancybox会生成空的。第二，它按照预期生成。我想出的一个解决方案是手动设置div的大小。然而，这会产生滚动和样式问题，我宁愿避免。

这是我的代码（注意，这是我创建的一个小页面，用于在移植到我们的实际网站之前测试我的代码）：

<script type="text/javascript">
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var manhattanPort = new google.maps.LatLng(40.767899, -73.995825);
var myHouse = new google.maps.LatLng(40.419866, -74.152263);
var geoCoder;
  function initialize() {
     geoCoder = new google.maps.Geocoder();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      center: manhattanPort,
      zoom:14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  function calcRoute(){
      var address = document.getElementById("address").value;
      var end = manhattanPort;
      var request = {
          origin: address,
          destination: end,
          travelMode: google.maps.TravelMode.DRIVING
      };
      geoCoder.geocode( {'address':address}, function(results,status){
          if(status == google.maps.GeocoderStatus.OK){
              map.setCenter(results[0].geometry.location);
          } else{
              alert("Geocode was not succesful for the following reason: " + status);
          }
      });

      directionsService.route(request, function(result, status){
          if( status == google.maps.DirectionsStatus.OK){
              directionsDisplay.setDirections(result);
          }
      });
  }

function doClear(theText){
    if (theText.value == theText.defaultValue){
        theText.value = ""
    }
}

</script>

 </head>
  <body onload="initialize()">
<table align="right">
<tr>
<td align="right" width="330" height="380">
<div id="map_canvas" style="width:100%; height:100%"></div>
</td>
</t
</table>     
<table align="center">
<tr>
<td align="center">
<div>
    <input name="start_address" id="address" type="text" value="Enter An Address To Get Directions" onFocus="doClear(this)" size="100"/>
    <!-- <input type="button" value="Get Directions" onClick="calcRoute();"/> -->
    <a class="fancybox" href="#directionsPanel" onClick="calcRoute();">Get Directions</a>
</div>
</td>
</tr>
<tr>
<td align="center">
<div id="directionsPanel"></div>
</td>
</tr>
</table>
</body>
</html>

现在很明显，我错过了粉丝盒本身的脚本。让我知道提供这些是否会有所帮助。

谢谢你的帮助！

在directionsService.route() 的回调中调用$.fancybox.update()

相关文章：