Javascript 谷歌地图 api 在单独的文件中时不起作用-6ren

Javascript 谷歌地图 api 在单独的文件中时不起作用

转载作者：行者123 更新时间：2023-12-02 18:16:57

24

4

我从 w3schools 复制了一段关于 google map api 的代码。

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>

</body>
</html>

当我将它放入我的 html 文件中时，它就可以工作。

但是，如果我尝试将这段代码放入 JavaScript 文件中

function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

    google.maps.event.addDomListener(window, 'load', initialize);

这不起作用

在我的 html 中将是

    <script
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
    </script>
<script src = "~/Scripts/JScript.js"> </Script>

我也尝试过去掉这个功能

    google.maps.event.addDomListener(window, 'load', initialize);

成为

    <script
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
    </script>
<script src = "~/Scripts/JScript.js"> google.maps.event.addDomListener(window, 'load', initialize);</Script>

但它似乎不起作用

最佳答案

这是工作代码，

HTML

map.html

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src="map.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

        </script>
    </head>

    <body>
        <div id="googleMap" style="width:500px;height:380px;"></div>

    </body>
</html>

JS

map.js

function initialize()
{
    var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap")
        ,mapProp);
}

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

包含 script 标记的顺序很重要。 js 文件按照包含的顺序加载

如果你检查控制台，你可以看到每个 js 文件都被一一加载。

关于Javascript 谷歌地图 api 在单独的文件中时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19194157/

24

4

0

文章推荐： javascript - 距离=费率*时间计算

文章推荐： javascript - ajax 调用后将 bool 值重置为 false

文章推荐： javascript - 如何在 PHP 中提交后禁用提交按钮？

地图：leaflet基本使用
leaflet：一个开源并且对移动端友好的交互式地图 JavaScript 库中文文档： https://leafletjs.cn/reference.html 官网（英文）： ht

首页

博学

6Ren·AI

商城

Javascript 谷歌地图 api 在单独的文件中时不起作用