Question

我是CSS的新手，我想在div背景中加载谷歌地图。我目前的代码如下：

HTML

<div class="map"></div>
<script src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false"></script>

CSS

.map{
    background-image:url(https://maps.google.co.in/maps?q=new+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10)
    background:white;
    width:1000px;
    height:500px;
    margin-left:20
}

Answer 1

我会使用谷歌的静态地图作为背景（没有任何js）

我做了一些最小的例子（身上只有css）：

body{
    background: url("https://maps.googleapis.com/maps/api/staticmap?     center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&sensor=false")
}

demo

编辑：固定widht / height和新德里的例子 is here

P.S。 url中的大小应与div宽度/高度成比例。对于非商业用户，最大图像尺寸为640x640，但是1280px x 1280px，因此您可以将其拉伸更多。

Answer 2

您可以将Google地图div设置为背景，然后将所有其他元素放在Google地图div上。

通过增加z-index并将这些元素置于absolute位置。

Answer 3

CSS中存在一些问题：

background-image:url(https://maps.google.co.in/maps?q=new+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10)

将其替换为：

background-image:url('https://maps.google.co.in/maps?q=new+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10');

请注意网址周围的单引号（'）和结尾处的分号（;）。添加引号是因为background-image的参数应该是一个字符串。

Answer 4

html, body {
    height:100%;
}

#map-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

#map
{
    width: 100%;
    height: 100%;
    background-image:url(https://maps.google.co.in/maps?     q=new+Delhi&hl=en&sll=28.572047,77.069178&sspn=0.02348,0.039482&hnear=Delhi&t=m&z=10)
    background:white;
    width:1000px;
    height:500px;
    margin-left:20

}
#content
{
    position: absolute;
    z-index: 1;
    top:0;
    left:0;
    padding:20px;
    background-color: rgba(255,255,255,0.5);
}

我怎么能在div的背景加载谷歌地图？

4 个答案: