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

 魂丢丶她城 发布于 2023-02-08 15:07

有没有办法在网站的背景下显示谷歌地图?
供您参考,请参阅图片在此输入图像描述

请帮帮我们.

1 个回答
  • 我想这可能会对你有所帮助.

    https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map(Google开发人员正在展示如何将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);
    }
    

    2023-02-08 15:09 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有