将 Google Maps Javascript 函数放入外部文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23192659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put Google Maps Javascript Function Into External File
提问by TheAnt.
I need to put my google maps javascript into an external javascript file and I am having some issues doing this. The code below is from my working HTML file, I have tried copying the function into an external file including the script src tags and DomListener. The issue I am having is with the DomListener and it not being able to load its parameters properly. I was wondering if you could please assist me with what I need to put in the external file and what I need to call in the HTML file to execute my script?
我需要将我的谷歌地图 javascript 放入一个外部 javascript 文件中，但我在这样做时遇到了一些问题。下面的代码来自我的工作 HTML 文件，我尝试将函数复制到一个包含脚本 src 标签和 DomListener 的外部文件中。我遇到的问题是 DomListener 并且它无法正确加载其参数。我想知道您是否可以帮助我了解需要放入外部文件的内容以及需要在 HTML 文件中调用的内容来执行我的脚本？
Thank you very much, Anthony
非常感谢，安东尼
<!DOCTYPE html>
<html>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<meta name="Park Map Brisbane"
content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
#map-canvas {
height: 800px;
width: 800px;
text-align: center;
margin-left: 51px;
margin: 0px;
padding: 0px
}
.gm-style-iw {
height: 100% !important;
overflow: hidden !important;
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng1 = new google.maps.LatLng(-25.363882, 150.044922);
var myLatlng2 = new google.maps.LatLng(-25.363882, 152.044922);
var mapOptions = {
zoom : 6,
center : myLatlng1
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentString1 = 'Mott Park'
var contentString2 = 'Kilpa Park'
var infowindow = new google.maps.InfoWindow({});
var marker1 = new google.maps.Marker({
position : myLatlng1,
map : map,
title : 'Park'
});
var marker2 = new google.maps.Marker({
position : myLatlng2,
map : map,
title : 'Water'
});
google.maps.event.addListener(marker1, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString1);//update the content for this marker
infowindow.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString2);//update the content for this marker
infowindow.open(map, marker2);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
回答by Manpreet Didwal
Its working fine for me.
它对我来说工作正常。
Here's my view/HTML file
这是我的视图/HTML 文件
<html>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<meta name="Park Map Brisbane" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
#map-canvas {
height: 800px;
width: 800px;
text-align: center;
margin-left: 51px;
margin: 0px;
padding: 0px
}
.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="/assets/scripts/test.js"></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
<html>
The script part is put inside an external file called test.js
脚本部分放在一个名为 test.js 的外部文件中
To access my javascript file I need the filepath '/assets/scripts'. Please enter your filepath where your script is located. For example, it will be just test.js if its in the same folder level.
要访问我的 javascript 文件，我需要文件路径“/assets/scripts”。请输入您的脚本所在的文件路径。例如，如果它在同一文件夹级别，它将只是 test.js。
