asp.net 页面中的谷歌地图

问题描述 投票：0回答：2

我试图在我的 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>
css asp.net vb.net google-maps-api-3
2个回答
0
投票

当您在 CSS 中使用百分比值时，特定元素的父元素需要设置特定属性（在本例中为

height
），否则浏览器无法计算该属性的值。

#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);
html, body, form, #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;
      }
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<form id="form1" runat="server">
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
      <input name="latlng" />
    </div>
    <div id="map-canvas"></div>
    </form>

0
投票

        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);
html, body, form, #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;
      }
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<form id="form1" runat="server">
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
      <input name="latlng" />
    </div>
    <div id="map-canvas"></div>
    </form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.