Question

我试图在我的vb.net页面加载谷歌地图，但地图没有显示在页面上。知道这里有什么问题吗？

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GoogleMap.aspx.vb" Inherits="GDemo.GoogleMap" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <title></title>

    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script>
        var geocoder;
        var map;
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 8,
                center: latlng
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        window.onload = initialize;

        function codeAddress() {
            var address = document.getElementById('address').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body >
    <form id="form1" runat="server">
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
    </form>
</body>
</html>

Answer 1

在CSS中使用百分比值时，特定元素的父元素需要设置特定属性（在本例中为Window's），否则浏览器无法计算属性的值。 / p>

private void OnLoaded(object sender, System.Windows.RoutedEventArgs e) { Window parentWindow = Window.GetWindow(this); if (parentWindow != null && parentWindow.Content == this) { parentWindow.ResizeMode = ResizeMode.NoResize; parentWindow.SizeToContent = SizeToContent.Height; parentWindow.MinHeight = this.MinHeight; parentWindow.MinWidth = this.MinWidth; } }的父元素是height，它没有高度。

e.g。这会奏效：

#map-canvas

使用地理编码响应填充输入的示例：

form#form1

 html, body, form#form1, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 8,
                center: latlng
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        

        function codeAddress() {
            var address = document.getElementById('address').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                    document.getElementById('form1').latlng.value=
                      results[0].geometry.location.toUrlValue();
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

谷歌地图在asp.net页面

1 个答案: