谷歌地图api;不要出现.CSS错误

Google maps api doesn't show up. CSS mistake?

本文关键字：CSS 错误 api 谷歌地图      更新时间：2023-09-26

我试图在我的网站上添加一个带有谷歌地图窗口的地图，但它没有显示。我已经设置了html, body { height: 100%; width: 100%}，映射的容器具有固定的高度和宽度，正如其他线程中所建议的那样。我的页面由一个菜单、一小段和地图组成，每一个都在一个单独的容器中。我在正确的位置输入了api键（此处省略）。

这是我使用的脚本

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: { lat: 45.084218, lng: 11.605727, 17},
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

这里是html

<body>
<h1 id="titolo">
    <a href="index.html">Mobilificio al Santuario</a>
</h1>
<div id="menu_top">
    <ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li>
        <a href="#">Prodotti</a>
        <ul>
            <li><a href="#">Cucine</a></li>
            <li><a href="#">Zona giorno</a></li>
            <li><a href="#">Camere</a></li>
            <li><a href="#">Materassi</a></li>
            <li><a href="#">Camerette</a></li>
            <li><a href="#">Bagni</a></li>
            <li><a href="#">Arredo Uffici</a></li>
        </ul>
        </li>
        <li><a href="#">Promozioni</a> </li>
        <li><a href="#">Social</a> </li>
        <li><a href="info.html">Info</a> </li>
    </ul>
</div>
<!-- Inizio contenuto -->
<div id="main">
    <h2 id="titolo_paragrafo">
        Dove siamo?
    </h2>
    <p>
        Text
    </p>
</div>
<div id="map-canvas"></div>

最后是我的CSS

    html {
    height: 100%;
    width: 100%;
    }
    body {
        margin: 0;
        padding: 0px;
        font-size: 100%;
        font-family: 'PT Sans', sans-serif;
        line-height: 26px;
        background-color: #eee;
        min-width: 490px;
        overflow: hidden;
        height: 100%;
        width: 100%;
        /*background-image: url(images/background.gif)*/
    }
a {
    text-decoration: none;
    color: inherit;
}
li {
    list-style-type: none;
    display: inline;
    margin: 4px;
}
#titolo {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin: 0, auto;
}
#menu_top {
    padding: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#menu {
    display: block;
    background-color: #fff;
    box-shadow: 0px 5px 10px #bbbbbb;
    padding: 5px;
}
#menu li {
    margin-left: auto;
    margin-right: auto;
    margin: 4px
}
ul#menu li a {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

ul#menu ul {
            display: inline;
            list-style: none;
            opacity: 0;
            position: absolute;
            visibility: hidden;
            z-index: 9999;
            background: #fff;
            margin-left: -250px;
            margin-right: auto;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}
ul#menu li:hover ul {
            opacity: 1;
            visibility: visible;
        }

#menu li a:hover {
    color: #0186ba;
}
ul {
    text-align: center;
}
ul#menu ul a {
    position: relative;
    width: auto;
    display: inline-block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
#menu a {
    text-decoration: none;
    color: inherit;
}
.blocco {
    display: inline-block;
    position: relative;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
p {
    display: block;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#titolo_paragrafo {
    display: block;
    position: relative;
    padding: 10px;
}
#famiglia {
    min-height: 290px
}
#famiglia img {
    width: 50%;
    margin: 10px;
    float: right
}
#marchi {
    padding: 0;
    margin: 0px;
    min-height: 380px;
    background-color: #ffffff;
    box-shadow: 0px 5px 10px #bbbbbb;
    display: inline-block;
}

#loghi {
    margin: 0;
    padding: 0;
    width: 50%;
    float: left;
}
#loghi li img{
    width: 130px;
    vertical-align: middle;
    margin: 10px;
    display: inline-block
}

#map-canvas {
    height: 400px;
    width: 500px;
    margin: 0;
    padding: 0;
    box-shadow: 0px 5px 10px #bbbbbb;
}

在var mapOptions=中{中心：{纬度：45.084218，液化天然气：11.605727，17}，缩放：8}；

在中正确地声明和定义了center属性。

使用var mapOptions={中心：新google.maps.LatLng（45.084218，11.605727），缩放：8}；

或者您可以将可变点定义为：

var点；并将其传递给中心属性。像这个

var Point=新的google.maps.LatLng（45.084218，11.605727）；

var mapOptions={center：点，缩放：8}；

相关文章：