[英]JQuery JavaScript Error in Browser, Not Dreamweaver
我正在嘗試創建一個通過文本框獲取位置的網頁,並在Google Maps上繪制該位置附近的所有近期地震。
我正在使用Dreamweaver調試代碼,並且當我使用其包含的內置實時網頁功能時,該網頁可以完美運行。
但是,當我在瀏覽器中打開保存的文件時,得到的只是一個錯誤“ Geocode由於以下原因而失敗:ERROR” 。 這對於找出問題所在並沒有幫助,而且我在使用網絡語言和開發網站方面經驗很少。
您可以借給我的任何幫助或見解將不勝感激。
碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=true">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
function codeAddress()
{
var loc = document.getElementById('locText').value;
geocoder.geocode( { 'address': loc}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var north = results[0].geometry.location.lat() + 1;
var south = results[0].geometry.location.lat() - 1;
var east = results[0].geometry.location.lng() + 1;
var west = results[0].geometry.location.lng() - 1;
var url;
url = 'http://api.geonames.org/earthquakesJSON?north=' + north + '&south=' + south + '&east=' + east + '&west=' + west + '&username=jpcguy89';
$.ajax(url,function(quakes)
{
$.each(quakes.earthquakes, function(k, aQuake){
var contentString = '<div id="content">' + '<p><b>ID:</b> ' + aQuake.eqid + '</p>' + '<p><b>Magnitude:</b> ' + aQuake.magnitude + '<p><b>Date:</b> ' + aQuake.datetime + '<p><b>Depth:</b> ' + aQuake.depth + '</div>';
var infowindow = new google.maps.InfoWindow
({
content: contentString
});
var latLng = new google.maps.LatLng(aQuake.lat,aQuake.lng);
var marker = new google.maps.Marker
({
position: latLng,
map: map,
title: 'Earthquake (' + aQuake.eqid + ')'
});
google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map,marker);
});
});
});
}
else
{
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<br />
<br />
<div id="test"></div>
<br />
<br />
<form id="geonamesFetch">
City/Location: <input type="text" id="locText" />
<input type="submit" id="submit" onclick="codeAddress()" />
</form>
<div id="map-canvas"/>
<p> </p>
<p> </p>
</body>
</html>
您正在HTML中綁定點擊處理程序:
<input type="submit" id="submit" onclick="codeAddress()" />
通過這種方式,將執行JavaScript,但隨后將立即提交表單。 您需要阻止表單提交。 從html中刪除點擊處理程序:
<input type="submit" id="submit" />
並綁定到JavaScript中的提交處理程序,以便您可以阻止表單提交。 將此添加到您的JavaScript:
$(function(){
$("#geonamesFetch").on("submit", function(e) {
e.preventDefault();
codeAddress();
});
});
編輯:您遇到的另一個問題是您對$.ajax()
調用。 該方法需要一個對象,但是您正在傳遞一個函數。 您可以更改代碼以傳遞對象,將現在擁有的功能設置為success
屬性:
$.ajax(url, {
success: function(quakes) {
...
}
});
或者使用$.get()
,它接受一個函數作為第二個參數:
$.get(url, function (quakes) {
...
});
您似乎正在加載混合協議資源。
而且您的jsFiddle似乎缺少資源( http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=true )
修復您的代碼以訪問NON httpS ..,然后重試。
在您的jsFiddle上看到:
> Timestamp: 9/30/2013 3:40:41 PM Error: ReferenceError: google is not
> defined Source File: fiddle.jshell.net/mZGL3/show Line: 93
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.