2017-09-21 9 views
0

このスクリプトをページロードではなくhrefマウスクリックで実行します。JavaScriptを作成するGoogle APIジオコードがページロードの代わりにマウスクリックで発生する

(ここに見られるように:Get city name using geolocation):ここでは、元のコードです

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=[YOUR KEY HERE]"></script> 
<script type="text/javascript"> 
var geocoder; 

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction); 
} 
// Get the latitude and the longitude; 
function successFunction(position) { 
    var lat = position.coords.latitude; 
    var lng = position.coords.longitude; 
    codeLatLng(lat, lng); 
} 

function errorFunction() { 
    alert("Geocoder failed"); 
} 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 

} 

function codeLatLng(lat, lng) { 
    var latlng = new google.maps.LatLng(lat, lng); 
    geocoder.geocode({latLng: latlng}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     if (results[1]) { 
     var arrAddress = results; 
     console.log(results); 
     $.each(arrAddress, function(i, address_component) { 
      if (address_component.types[0] == "locality") { 
      console.log("City: " + address_component.address_components[0].long_name); 
      itemLocality = address_component.address_components[0].long_name; 
      } 
     }); 
     } else { 
     alert("No results found"); 
     } 
    } else { 
     alert("Geocoder failed due to: " + status); 
    } 
    }); 
} 
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html> 

私は <a href="" onClick="initialize();">Get position</a><body onload="initialize()">を変更する場合は、私が取得:

Uncaught TypeError: Cannot read property 'geocode' of undefined at codeLatLng at successFunction

+0

ためのものが実行されているせいで、関数の中でも、変数の宣言をすべてを置くと、その後のonclick –

答えて

0

ワーキングコード

<!DOCTYPE html> 
<html> 

<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Reverse Geocoding</title> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     var geocoder; 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(successFunction, errorFunction); 
     } 
     // Get the latitude and the longitude; 
     function successFunction(position) { 
      var lat = position.coords.latitude; 
      var lng = position.coords.longitude; 
      codeLatLng(lat, lng); 
     } 

     function errorFunction() { 
      alert("Geocoder failed"); 
     } 


     function codeLatLng(lat, lng) { 
      geocoder = new google.maps.Geocoder(); 
      var latlng = new google.maps.LatLng(lat, lng); 
      geocoder.geocode({ 
       latLng: latlng 
      }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        if (results[1]) { 
         var arrAddress = results; 
         console.log(results); 
         $.each(arrAddress, function(i, address_component) { 
          if (address_component.types[0] == "locality") { 
           console.log("City: " + address_component.address_components[0].long_name); 
           itemLocality = address_component.address_components[0].long_name; 
          } 
         }); 
        } else { 
         alert("No results found"); 
        } 
       } else { 
        alert("Geocoder failed due to: " + status); 
       } 
      }); 
     } 
    </script> 
</head> 

<body> 
    <a href="" onClick="initialize();">Get position</a> 
</body> 

</html> 
+0

申し訳ありませんが、その関数を呼び出すようにしようとしますが、これも同様に、ページの読み込み上でスクリプトをロードします。私のonClickだけでなく、 –

0

queryset get_locationがtrueに設定されている場合は、navigator.geolocation.getCurrentPosition(successFunction, errorFunction);のロードを終了しました。作品。誰かが別の解決策を見つけたら、教えてください。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=[YOUR KEY HERE]"></script> 
<script type="text/javascript"> 
var getUrlParameter = function getUrlParameter(sParam) { 
    var sPageURL = decodeURIComponent(window.location.search.substring(1)), 
     sURLVariables = sPageURL.split('&'), 
     sParameterName, 
     i; 

    for (i = 0; i < sURLVariables.length; i++) { 
     sParameterName = sURLVariables[i].split('='); 

     if (sParameterName[0] === sParam) { 
      return sParameterName[1] === undefined ? true : sParameterName[1]; 
     } 
    } 
}; 

var geocoder; 
var getPosition = getUrlParameter('get_position'); 


if (navigator.geolocation && getPosition == "true") { 
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction); 
} 
// Get the latitude and the longitude; 
function successFunction(position) { 
    var lat = position.coords.latitude; 
    var lng = position.coords.longitude; 
    codeLatLng(lat, lng); 
} 

function errorFunction() { 
    alert("Geocoder failed"); 
} 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 

} 

function codeLatLng(lat, lng) { 
    var latlng = new google.maps.LatLng(lat, lng); 
    geocoder.geocode({latLng: latlng}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     if (results[1]) { 
     var arrAddress = results; 
     console.log(results); 
     $.each(arrAddress, function(i, address_component) { 
      if (address_component.types[0] == "locality") { 
      console.log("City: " + address_component.address_components[0].long_name); 
      itemLocality = address_component.address_components[0].long_name; 
      } 
     }); 
     } else { 
     alert("No results found"); 
     } 
    } else { 
     alert("Geocoder failed due to: " + status); 
    } 
    }); 
} 
</script> 
</head> 
<body> 

<a href="/?get_position=true">Get position</a> 

</body> 
</html> 
関連する問題