Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Google maps 如何在网站背景中显示谷歌地图_Google Maps - Fatal编程技术网

Google maps 如何在网站背景中显示谷歌地图

Google maps 如何在网站背景中显示谷歌地图,google-maps,Google Maps,有没有办法在网站背景中显示谷歌地图? 请看图片以供参考 请帮帮我。不你不能将谷歌地图设置为背景图像,因为它就像画布一样 一种可能性是你可以在谷歌地图上用绝对定位定位来定位其他元素,我想这可能会对你有所帮助 (谷歌开发者正在展示如何将谷歌地图添加到您的网站) 而且 (另一个链接显示如何将其用作背景) 编辑…整个代码应该是这样的:这是来自谷歌开发人员,他们解释了如何把它放在你的网站上 <!DOCTYPE html> <html> <head>

有没有办法在网站背景中显示谷歌地图?
请看图片以供参考


请帮帮我。

你不能将谷歌地图设置为背景图像,因为它就像画布一样


一种可能性是你可以在谷歌地图上用绝对定位定位来定位其他元素,我想这可能会对你有所帮助

(谷歌开发者正在展示如何将谷歌地图添加到您的网站)

而且

(另一个链接显示如何将其用作背景)

编辑…整个代码应该是这样的:这是来自谷歌开发人员,他们解释了如何把它放在你的网站上

    <!DOCTYPE html>
<html>
  <head>
    <style>
      #map_canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

我的问题是如何在后台显示GoogleMap您需要做的就是将GoogleMap设置在一个100%的div中,z索引比您希望在上面显示的任何内容都要低。您可能还希望禁用滚动缩放,否则站点导航可能会令人恼火。谷歌搜索有很多例子,非常简单。这是教程,因为你是一个新用户,但请记住,我们不希望只有链接的答案,因为如果链接死了,你的答案将不再有用:)请你把链接的重要部分放在答案中,因为只有链接的答案在这里不好,因为它们可能会断开。是的,链接已失效,请检查它们…它们仍保持不变:)
 <!DOCTYPE html>
<html>
<head>
<link href="/test/application.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyBNLDwRv4ItlTJRouExNPpJokdKK859yDk">
</script>
<script src="/test/application.js" type="text/javascript"></script>
</head>
<body>
<div id='container'>
<h1>OMG, this is ON TOP OF THE MAP!</h1>
</div>

<div id='map-canvas'></div>
</body>
</html>
 $(document).ready(function() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}