我继承了一个旧脚本，必须让它运行起来。当我在本地运行HTML文件时，一切正常。但是当它在ULR上托管时它将不起作用。
当正确（本地）工作时，脚本会获取街道地址并将其转换为长时间和纬度，并在地图上将标记放在正确的位置。然后它允许用户移动标记，更新坐标。
如果工作不正确（托管），脚本将不会更新地图，并且无法获取所提供地址的正确坐标。
我确信这很简单，因为它可以完美运行，直到我将其移至托管网址。
托管网址为http://bvcb.bluecubevillage.com/gmap.html，压缩版本（供下载）位于http://bvcb.bluecubevillage.com/gmap.zip
我也在粘贴以下来源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Basic Google Map example</title>
<style type="text/css">
<!--
body,div,h1,h2,p,form {
font-family: verdana,arial,helvetica,sans-serif;
font-size:10px;
}
.formcontainer {
width:60%;
}
form div {
}
dl {
}
dt {
float: left;
clear: left;
width: 65px;
text-align: right;
}
dd {
margin: 0 0 0 75px;
padding: 0 0 0.5em 0;
}
label {
line-height: 18px;
}
input[type=submit]{
}
h1{
font-size:12px;
padding:0;
margin:20px 0 10px 0;
}
p.instructions{
font-weight: bold;
}
-->
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyCYI244v8KiuklwZ_1Y1ce9f5r0WoSkJTk"
type="text/javascript"></script>
<script type="text/javascript">
function returnCoords(){
parent.document.getElementById('longitude').value = document.getElementById('longBox').value;
parent.document.getElementById('latitude').value = document.getElementById('latBox').value;
parent.TINY.box.hide();
}
//<![CDATA[
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.460670, -41.835938), 2);
map.addControl(new GSmallMapControl()); // ADD CONTROL FOR PAN AND ZOOM
map.addControl(new GMapTypeControl()); // ADD CONTROL FOR MAP/SAT/HYBRID VERSIONS
geocoder = new GClientGeocoder();
//GEvent.addListener(map, "moveend", function() {
// makeCoords();
//});
var newcenter = map.getCenter();
var marker = new GMarker(newcenter, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
}
}
function showAddress(address, city, country) {
var fulladdress;
// make sure the Geocoder only picks up city/country if nothing else available
if ((address=="") || (city=="") || (country =="")){
fulladdress = address;
}
else {
fulladdress = address + ' ' + city + ' ' + country;
}
if (geocoder) {
// test if full address exists
geocoder.getLatLng(fulladdress, function(point) {
if (!point) {
// test if city exists
geocoder.getLatLng(city, function(point1) {
if (!point1) {
// test if country exists
geocoder.getLatLng(country, function(point2) {
if (!point2) {
//point2 = '(35.460670, -41.835938)';
//map.setCenter(point2, 3);
var newcenter = map.getCenter();
var marker = new GMarker(newcenter, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
}
else {
map.setCenter(point2, 3);
var marker = new GMarker(point2, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
}
}
);
}
else {
map.setCenter(point1, 12);
var marker = new GMarker(point1, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
}
}
);
}
else {
map.setCenter(point, 14);
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, "dragend", function(){
mynewCenter = marker.getPoint();
zoomLevel = map.getZoom();
map.setCenter(mynewCenter, zoomLevel);
makeCoords();
clearBoxes();
});
map.addOverlay(marker);
// marker.openInfoWindowHtml(fulladdress);
}
}
);
makeCoords();
}
}
function makeCoords() {
var center = map.getCenter();
var myCenterString = new String(center);
var myCenterArray = tidyUp(myCenterString);
zoomLevel = map.getZoom();
document.myform1.latBox.value = myCenterArray[0];
document.myform1.longBox.value = myCenterArray[1];
//document.myform1.zoomBox.value = zoomLevel;
}
function clearBoxes (){
document.myform.myaddress.value = "";
document.myform.mycity.value = "";
document.myform.mycountry.value = "";
}
function tidyUp(string){
string = '' + string;
splitstring = string.split(" ");
string = unsplitit(splitstring);
splitstring = string.split("(");
string = unsplitit(splitstring);
splitstring = string.split(")");
string = unsplitit(splitstring);
splitstring = string.split(",")
for(i = 0; i < splitstring.length; i++){
splitstring[i] = parseFloat(splitstring[i]);
splitstring[i] = splitstring[i].toFixed(6); // 6 decimal places only
}
return splitstring;
}
function unsplitit(tarray){
var tstring = "";
for(i = 0; i < tarray.length; i++){
tstring += tarray[i];
}
return tstring;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:600px; height:400px"></div>
<div style="width:300px;float:left;">
<h1>Enter location details here</h1>
<form action="#" name="myform" id="myform" onsubmit="showAddress(this.myaddress.value, this.mycity.value, this.mycountry.value); return false">
<dl>
<dt><label for="myaddress">Address:</label></dt>
<dd><input type="text" size="20" name="myaddress" value="" /></dd>
<dt><label for="mycity">City:</label></dt>
<dd><input type="text" size="20" name="mycity" value="" /></dd>
<dt><label for="mycountry">Country:</label></dt>
<dd><input type="text" size="20" name="mycountry" value="" /></dd>
</dl>
<dt> </dt><dd><input type="submit" value="Get Co-ordinates" /></dd>
</form>
</div>
<div style="width:290px;float:left">
<h1>Enter/Retrieve Geocodes here</h1>
<form name="myform1" id="myform1">
<dl>
<dt><label for="myaddress">Latitude:</label></dt>
<dd><input type="text" id="latBox" size="10" /></dd>
<dt><label for="myaddress">Longitude:</label></dt>
<dd><input type="text" id="longBox" size="10" /></dd>
<dt> </dt><dd>You may drag the location icon to refine location</dd>
<dt> </dt><dd><button onclick="returnCoords()">Click to Finish</button></dd>
</dl>
</form>
</div>
</body>
</html>
答案 0 :(得分：1)
最佳解决方案是升级到API v3。此解决方案有效。我在iframe模态窗口中使用它，因此将coords返回到父窗口中的字段的函数。 光盘 GEOMAP
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/js/map-init.js"></script>
<script type="text/javascript">
function returnCoords(){
parent.document.getElementById('longitude').value = document.getElementById('lng').value;
parent.document.getElementById('latitude').value = document.getElementById('lat').value;
parent.TINY.box.hide();
}
</script>
<style type="text/css">
<!--
body,div,h1,h2,p,form {
font-family: verdana,arial,helvetica,sans-serif;
font-size:10px;
}
.formcontainer {
width:60%;
}
form div {
}
dl {
}
dt {
float: left;
clear: left;
width: 65px;
text-align: right;
}
dd {
margin: 0 0 0 75px;
padding: 0 0 0.5em 0;
}
label {
line-height: 18px;
}
input[type=submit]{
}
h1{
font-size:12px;
padding:0;
margin:20px 0 10px 0;
}
p.instructions{
font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="the-map" style="width:600px; height:400px"></div>
<div style="width:300px;float:left;">
<h1>Enter location details here</h1>
<form action="" name="myform" id="myform" onsubmit="codeAddress(); return false">
<dl>
<dt><label for="add1">Address:</label></dt>
<dd><input type="text" size="20" name="add1" id="add1" value="" /></dd>
<dt><label for="town">City:</label></dt>
<dd><input type="text" size="20" name="town" id="town" value="" /></dd>
<dt><label for="postcode">Postcode:</label></dt>
<dd><input type="text" size="20" name="postcode" id="postcode" value="" /></dd>
</dl>
<dt> </dt><dd><input type="submit" value="Get Co-ordinates" /></dd>
</form>
</div>
<div style="width:290px;float:left">
<h1>Enter/Retrieve Geocodes here</h1>
<form name="myform1" id="myform1">
<dl>
<dt><label for="lat">Latitude:</label></dt>
<dd><input type="text" id="lat" size="10" /></dd>
<dt><label for="lng">Longitude:</label></dt>
<dd><input type="text" id="lng" size="10" /></dd>
<dt> </dt><dd><b>You may drag the location icon to refine location</b></dd>
<dt> </dt><dd><button onclick="returnCoords()">Click to Finish</button></dd>
</dl>
</form>
</div>
</body>
</html>
这是我用过的javascript：
var map;
var geocoder;
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(54.594,-5.930);
//var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("the-map"),myOptions);
}
$(document).ready(function(){
initialize();
var loc = new google.maps.LatLng(54.594,-5.930);
map.setCenter(loc);
marker = new google.maps.Marker({
position: loc,
map: map,
draggable:true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
});
function updateMarkerPosition(latLng) {
// use .toFixed(5) to limit to 5 digits
document.getElementById('lat').value=latLng.lat();
document.getElementById('lng').value=latLng.lng();
}
function codeAddress() {
//var name = document.getElementById("name_long").value;
var add1 = document.getElementById("add1").value;
//var add2 = document.getElementById("add2").value;
var town = document.getElementById("town").value;
//var county = document.getElementById("county").value;
var postcode = document.getElementById("postcode").value;
var address = add1+" "+town+" "+postcode;
geocoder.geocode( {
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(16);
marker.setPosition(results[0].geometry.location);
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
$("#lat").val(lat);
$("#lng").val(lng);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}