个人中心
gpt4 book ai didi

javascript - 简单的谷歌地图不适用于外部 css 和 javascript 文件

转载 作者：太空宇宙 更新时间：2023-11-04 02:50:01 24 4
gpt4 key购买 nike

我已经按照指南 here 在 html 页面中设置了最基本的谷歌地图 View 。 ，但我无法显示 map 。我知道这一定很简单，我已经尝试了很多修复，但它似乎不适用于链接的 css 和 js。请注意，当我在没有链接的情况下在一个页面中使用代码时它有效，但当我使用外部 CSS 和 JS 时它不起作用。这是我的 html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" src="css/mapstyle.css">
  </head>
  <body>
    <div id="map"></div>
    <script src="js/map.js">
    </script>

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-xpQoYQMY&callback=initMap">
    </script>

  </body>
</html>

JS:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

CSS:

  html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }

这是 fiddle :JSFiddle

最佳答案

加载页面时需要调用initMap()函数(如果使用JQuery):

var map;

$(document).ready(function(){
    initMap();
});

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

    document.add
}

Fiddle

在 map.js 之前添加 google map 的 script。因为它需要在您的 js

中加载 Google Map 脚本 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script‌​> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-‌​xpQoYQMY> </script>
    <script src="js/map.js"></script> 

    <link rel="stylesheet" type="text/css" src="css/mapstyle.css"> 
</head> 
<body>
    <div id="map"></div>
</body> 
</html>

关于javascript - 简单的谷歌地图不适用于外部 css 和 javascript 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33208643/

24 4 0
文章推荐： Python 进程池执行程序关闭信号
文章推荐： node.js - 使用 formData 进行 Express Node-fetch 时出现无效的 json 响应正文错误
文章推荐： javascript - Nodemailer 6.1.1 无法与 NodeJs >=12 一起使用
文章推荐： node.js - Angular如何显示json对象的实时值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com