Question

我在Aspx应用程序中实施谷歌地图。以下代码在html中正常工作。当我试图在CSHtml中实现时，它不会完全在加载时显示地图。我在我的aspx中使用了以下代码来加载地图。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw"
  type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>

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

function initialize() {
  if (GBrowserIsCompatible()) {

    // Create and Center a Map
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());

    // bind a search control to the map, suppress result list
    map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
  }
}
GSearch.setOnLoadCallback(initialize);

</script>

Img为部分加载的地图

我上传了以下网址http://imageshack.us/photo/my-images/7/mapdk.jpg/中的屏幕截图。

如何在我的CSHtml页面中完全加载地图加载页面？任何修复或解决方案？

Answer 1

您链接的图片会显示一张小地图，您的问题也是如此......

如何在我的CSHtml页面中完全加载地图加载页面

...意味着您希望地图填写整个页面？

使用您上面的示例代码（我假设您将其放在HTML文档中），并且鉴于您在某处<div id="map_canvas"></div>有一个div，我认为您所缺少的只是CSS定义您想要的地图大小。例如，

<style type="text/css">
  #map_canvas { width: 800px; height: 800px; }
</style>

Google Maps API会将地图渲染为包含div的地图大小。

另见Google Maps API Page。他们的例子将呈现一个填满整个页面的地图：

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>

Google地图未在页面加载时完全加载

1 个答案: