Question

我正在尝试使用Google地图窗口在我的网站中添加地图，但它没有显示出来。我已经设置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;
}

Answer 1

在var mapOptions = { center：{lat：45.084218，lng：11.605727,17}， zoom：8 };

正确声明和定义center属性。

使用var mapOptions = { center：new google.maps.LatLng（45.084218,11.605727）， zoom：8 };

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

var Point;并将其传递给中心物业。像这样

var Point = new google.maps.LatLng（45.084218,11.605727）;

var mapOptions = { 中心点， zoom：8 };

谷歌地图api没有出现。 CSS错误？

1 个答案: