ReferenceError:$未定义

时间:2013-08-30 17:57:37

标签: javascript jquery html google-maps google-maps-api-3

这是我的代码,它执行自动地址填充和识别所选纬度/经度/地址的功能。

<html>

<head>
<LINK rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
</head>

<body>
<p>Location: <input type="text" id="searchTextField" size="50"  placeholder="Where do you want to go ?"/></p>

<div id="results"></div>

<script>


var input = document.getElementById('searchTextField');
var options = {

};
var autocomplete = new google.maps.places.Autocomplete(input,options);
//autocomplete.bindTo('bounds', map); 

google.maps.event.addListener(autocomplete, 'place_changed', function() {
     $("#results").html('');
  var place = autocomplete.getPlace();
    $("#results").append('<p> Latitude and Longtidute : '+place.geometry.location +'</p>');
    $("#results").append('<p> Address : '+place.formatted_address +'</p>');
    $("#results").append('<p> Places Name : '+place.name+'</p>');

    var searchAddressComponents = place.address_components;
    $.each(searchAddressComponents, function(){
    if(this.types[0]=="postal_code"){
        searchCountry=this.short_name;
    } 
});
});
</script>
</body>
</html>

我认为一切都是正确的,但它在firebug引发了这个错误ReferenceError:$未定义

你可以帮我吧吗

请查看http://jsfiddle.net/NuCUd/8/以获取参考

2 个答案:

答案 0 :(得分:5)

$由jQuery定义,jQuery是一个普通的第三方库。

如果您不包含它,它将不存在。

答案 1 :(得分:3)

将您的代码更改为:

<html>

<head>
<LINK rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
</head>

<body>
<p>Location: <input type="text" id="searchTextField" size="50"  placeholder="Where do you want to go ?"/></p>

<div id="results"></div>

<script>


var input = document.getElementById('searchTextField');
var options = {

};
var autocomplete = new google.maps.places.Autocomplete(input,options);
//autocomplete.bindTo('bounds', map); 

google.maps.event.addListener(autocomplete, 'place_changed', function() {
     $("#results").html('');
  var place = autocomplete.getPlace();
    $("#results").append('<p> Latitude and Longtidute : '+place.geometry.location +'</p>');
    $("#results").append('<p> Address : '+place.formatted_address +'</p>');
    $("#results").append('<p> Places Name : '+place.name+'</p>');

    var searchAddressComponents = place.address_components;
    $.each(searchAddressComponents, function(){
    if(this.types[0]=="postal_code"){
        searchCountry=this.short_name;
    } 
});
});
</script>
</body>
</html>