个人中心
gpt4 book ai didi

css - asp.net 页面中的谷歌地图

转载 作者：行者123 更新时间：2023-11-28 07:41:19 25 4
gpt4 key购买 nike

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

<%@ 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 中使用百分比值时，特定元素的父元素需要设置特定属性(在本例中为 height)，否则浏览器无法计算属性(property)。

#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>

关于css - asp.net 页面中的谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30935130/

25 4 0
文章推荐： CSS 不适用于端口 8080 上的框架 url
文章推荐： c++ - 通过 Lua 获取 C++ wchar_t 到 Flash
文章推荐： c++ - 从链表中删除节点时出错
文章推荐： jquery - 响应式导航选项卡，即可折叠的导航选项卡
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com