我正在制作一个小型测距仪小程序。基本上，我有两个来自服务器的PHP变量，它们是$ Location1和$ Location2。我想将这些变量集成到这个Javascript中。我想将PHP中的变量替换为Javascript中的变量。
这是我的主要问题。我的另一个问题是我无法找到如何将Javascript函数调用到另一个页面。例如，我在一个名为“DistanceFinder”的页面上有这个Javascript，我希望这个脚本在另一个页面上执行 - 类似于在PHP中调用一个函数。
感谢您的帮助。我没有接受任何正式培训，我正在努力学习这些语言。如果你能在这里帮助我，那就太棒了。谢谢。
P.S这是使用Google Maps API V3，该脚本来自互联网上的教程。
<html>
<head>
<title>Distance finder</title>
<meta type="description" content="Find the distance between two places on the map and the shortest route."/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var location1;
var location2;
var address1;
var address2;
var latlng;
var geocoder;
var map;
var distance;
// finds the coordinates for the two locations and calls the showMap() function
function initialize()
{
geocoder = new google.maps.Geocoder(); // creating a new geocode object
// getting the two address values
address1 = document.getElementById("address1").value;
address2 = document.getElementById("address2").value;
// finding out the coordinates
if (geocoder)
{
geocoder.geocode( { 'address': address1}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of first address (latitude + longitude)
location1 = results[0].geometry.location;
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
geocoder.geocode( { 'address': address2}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of second address (latitude + longitude)
location2 = results[0].geometry.location;
// calling the showMap() function to create and show the map
showMap();
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
// creates and shows the map
function showMap()
{
// center of the map (compute the mean value between the two locations)
latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);
// set map options
// set zoom level
// set center
// map type
var mapOptions =
{
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
// create a new map object
// set the div id where it will be shown
// set the map options
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
origin:location1,
destination:location2,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
}
});
// show a line between the two points
var line = new google.maps.Polyline({
map: map,
path: [location1, location2],
strokeWeight: 7,
strokeOpacity: 0.8,
strokeColor: "#FFAA00"
});
// create the markers for the two locations
var marker1 = new google.maps.Marker({
map: map,
position: location1,
title: "First location"
});
var marker2 = new google.maps.Marker({
map: map,
position: location2,
title: "Second location"
});
// create the text to be shown in the infowindows
var text1 = '<div id="content">'+
'<h1 id="firstHeading">First location</h1>'+
'<div id="bodyContent">'+
'<p>Coordinates: '+location1+'</p>'+
'<p>Address: '+address1+'</p>'+
'</div>'+
'</div>';
var text2 = '<div id="content">'+
'<h1 id="firstHeading">Second location</h1>'+
'<div id="bodyContent">'+
'<p>Coordinates: '+location2+'</p>'+
'<p>Address: '+address2+'</p>'+
'</div>'+
'</div>';
// create info boxes for the two markers
var infowindow1 = new google.maps.InfoWindow({
content: text1
});
var infowindow2 = new google.maps.InfoWindow({
content: text2
});
// add action events so the info windows will be shown when the marker is clicked
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker1);
});
// compute distance between the two points
var R = 6371;
var dLat = toRad(location2.lat()-location1.lat());
var dLon = toRad(location2.lng()-location1.lng());
var dLat1 = toRad(location1.lat());
var dLat2 = toRad(location2.lat());
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(dLat1) * Math.cos(dLat1) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
document.getElementById("distance_direct").innerHTML = "<br/>The distance between the two points (in a straight line) is: "+d;
}
function toRad(deg)
{
return deg * Math.PI/180;
}
</script>
</head>
<body bgcolor="#eeeeee">
<div id="form" style="width:100%; height:20%">
<table align="center" valign="center">
<tr>
<td colspan="7" align="center"><b>Find the distance between two locations</b></td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td>First address:</td>
<td> </td>
<td><input type="text" name="address1" id="address1" size="50"/></td>
<td> </td>
<td>Second address:</td>
<td> </td>
<td><input type="text" name="address2" id="address2" size="50"/></td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td colspan="7" align="center"><input type="button" value="Show" onClick="initialize();"/></td>
</tr>
</table>
</div>
<center><div style="width:100%; height:10%" id="distance_direct"></div></center>
<center><div style="width:100%; height:10%" id="distance_road"></div></center>
<center><div id="map_canvas" style="width:70%; height:54%"></div></center>
</body>
</html>
答案 0 :(得分：1)
假设您编写的代码是php文件......
var location1 = "<?php echo $Location1 ?>";
var location2 = "<?php echo $Location2 ?>";
也就是说，这将阻止您最小化并将此javascript放入单独的JavaScript文件中（您应该在某些时候执行此操作）。
我的另一个问题是我无法找到如何调用Javascript 功能到另一页。例如，我有一个这样的Javascript 名为“DistanceFinder”的页面，我想要执行此脚本 另一个页面 - 类似于在PHP中调用函数。
不要认为JavaScript属于某个页面。开始将您的JavaScript代码分离为单独的js文件，这样它们就不会混淆您的html / php文件。如果你想从你编写的其他JavaScript中调用一个函数，只需在你要调用它的页面中包含它的.js文件。
<script type="text/javascript" src="javascripts/myCode.js"></script>
答案 1 :(得分：1)
尝试
var mylocationvar = "<?php echo $location1;?>";
甚至更好：
var mylocationvar = <?= json_encode($location1); ?>;