Question

有没有办法在网站背景下显示谷歌地图？供您参考，请参阅图片 enter image description here

请帮帮我们。

Answer 1

我认为这可能会对你有帮助。

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map（Google Developers正在展示如何在您的网站上添加Google地图）

和...

http://www.thechrisoshow.com/2013/05/07/use-a-google-map-as-the-background-of-your-webpage/

（另一个链接显示了如何将其用作背景）

编辑...整个代码应如下所示：这是来自Google Developers，他们会解释如何将其放入您的网站。

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

这是您可以将Google地图设置为背景的代码。

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

+ javascript ofc ...

 $(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);
}

Answer 2

否您无法将Google地图设置为背景图片，因为它就像一个画布。

一种可能性是您可以使用 绝对定位 在Google地图上定位其他元素。

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

2 个答案: