なぜgeocoder = new google.maps.geocoder（）ですか;私のアプリで働いている？

Question

私は、ページの下部にあるウィンドウに住所が表示されるように、アプリケーションの住所を逆転しようとしています.2番目のウィンドウでは、座標、精度、速度、および情報の所要時間が表示されます更新しました。逆ジオコーディング部分を使わずにコードを実行すると、すべて正常に動作しますが、ジオコードを逆転しようとすると、最初のウィンドウで何も取得できませんが、座標、精度、および速度のウィンドウも空白になります。なぜ私の逆ジオコーディングコードの影響を受けて2番目のウィンドウが理解できないと、最初のウィンドウにアドレスが表示されない理由がわかりません。ここで

は私のコードです：

$(document).on("mobileinit", function() { 
 
    //$(document).ready(function(){ 
 
    console.log('mobileinit'); 
 
    $.mobile.page.prototype.options.defaultPageTransition = "none"; 
 
    $.mobile.listview.prototype.options.theme = "a"; 
 
    $.mobile.toolbar.prototype.options.theme = "a"; 
 
    $.mobile.toolbar.prototype.options.addBacBtn = "true"; 
 

 

 
}); 
 
var geocoder; 
 
var currentLocation; 
 

 
function init() { 
 
    if (navigator.geolocation) { 
 
    //Use the Geolocation API to get current location and track it as you move 
 
    navigator.geolocation.watchPosition(showLocation, locationError); 
 
    } else { 
 
    alert("Geolocation not supported on this device"); 
 
    return; 
 
    } 
 
    // Define "click" events for "queryPlaces()" function 
 
    $("#policeItem").on("click", function() { 
 
    queryPlaces('Police'); 
 
    }); 
 
    $("#fsItem").on("click", function() { 
 
    queryPlaces('Fire Station'); 
 
    }); 
 
    $("#tdItem").on("click", function() { 
 
    queryPlaces('Transportation Department'); 
 
    }); 
 
    $("#ahItem").on("click", function() { 
 
    queryPlaces('Animal Hospital'); 
 
    }); 
 
    $("#hospitalItem").on("click", function() { 
 
    queryPlaces('Hospital'); 
 
    }); 
 

 

 

 
} //end of init function  
 

 
function showLocation(location) { 
 
    //var temp = "Geocoding Not In Operation... Sorry"; 
 
    //$('#loc').html(temp); 
 
    geocoder = new google.maps.geocoder(); 
 
    currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); 
 

 
    geocoder.geocode({ 
 
    'location': curentLocation 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     if (results[0]) { 
 
     $('#loc').html(results[0].formatted_address); 
 
     } else { 
 
     $('#loc').html('No address found'); 
 
     } 
 
    } else { 
 
     $('#loc').html('Unavailable to determine address'); 
 
    } 
 
    }); //end of geocode method 
 

 

 

 
    var info = "Coordinates: " + parseFloat(location.coords.latitude).toFixed(3) + ", "; 
 
    info += parseFloat(location.coords.longitude).toFixed(3) + "<br/>"; 
 
    info += "Accuracy: " + parseFloat(location.coords.accuracy) + " meters" + "<br/>"; 
 
    info += "Speed: " + parseFloat(location.coords.speed) + " m/s" + "<br/>"; 
 
    info += "Updated: " + new Date(location.timestamp).toLocaleString(); 
 
    $('#acc').html(info); 
 
} //end of showLocation function   
 

 
function locationError(error) { 
 
    switch (error.code) { 
 
    case error.PERMISSION_DENIED: 
 
     alert("Geolocation access denied or disabled. To enable geolocation " + "on your iPhone, go to Settings > General > Location Services"); 
 
     break; 
 
    case error.POSITION_UNAVAILABLE: 
 
     alert("Current location not available"); 
 
     break; 
 
    case error.TIMEOUT: 
 
     alert("Timeout"); 
 
     break; 
 
    default: 
 
     alert("unknown error"); 
 
     break; 
 
    } 
 
} 
 

 
function updateDist(value) { 
 

 
    $("#distVal").html("" + value + " meters"); 
 
} 
 

 
$(document).on("pagecreate", "#homeView", init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
 

 

 
<!-- Home Page Begins--> 
 
<div id="homeView" data-role="page" data-title="Wildlife Vehicle Collisions" data-theme="a"> 
 
    <div data-role="header" data-position="fixed" id="header1"> 
 
    <h1>WVC</h1> 
 
    </div> 
 

 
    <div data-role="content"> 
 
    <img src="images/wildlife-3.jpg" alt="WVC Management" /> 
 
    <div data-role="controlgroup" data-theme="b" class="ui-content"> 
 
     <a href="#findView" class="ui-btn ui-icon-search ui-btn-icon-left">Find Nearby</a> 
 
     <a href="#report" class="ui-btn ui-icon-eye ui-btn-icon-left">Report Collisions</a> 
 
     <a href="#videos" class="ui-btn ui-icon-video ui-btn-icon-left">Videos</a> 
 
     <a href="#photos" class="ui-btn ui-icon-grid ui-btn-icon-left">Photos</a> 
 
    </div> 
 
    <!-- links --> 
 
    </div> 
 
    <!-- content --> 
 
    <footer> 
 
    <p>&copy; Copyright by resop</p> 
 
    </footer> 
 
</div> 
 
<!-- page --> 
 

 
<!-- findView Page Begins--> 
 
<div id="findView" data-role="page" data-theme="a"> 
 
    <div data-role="header" data-position="fixed" id="header1"> 
 
    <a href="#homeView" class="ui-btn ui-icon-home ui-btn-icon-notext ui-shadow ui-corner-all">Home</a> 
 
    <h1>What's Nearby</h1> 
 
    <a href="#settingsView" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-shadow ui-corner-all">Settings</a> 
 
    </div> 
 
    <!--header End--> 
 

 
    <div data-role="content"> 
 
    <ul data-role="listview" data-inset="true"> 
 
     <li id="policeItem"><a href="#resultsView">Police Departments</a></li> 
 
     <li id="fsItem"><a href="#resultsView">Fire Stations</a></li> 
 
     <li id="tdItem"><a href="#resultsView">Transportation Departments</a></li> 
 
     <li id="ahItem"><a href="#resultsView">Animal Hospitals</a></li> 
 
     <li id="hospitalItem"><a href="#resultsView">Hospitals</a></li> 
 
    </ul> 
 

 
    <h2>Current Location</h2> 
 
    <div id="loc"></div> 
 
    <div id="acc"></div> 
 
    </div> 
 
    <!-- Content End --> 
 

 
    <div data-role="footer" data-position="fixed" id="footer1"> 
 
    <div data-role="navbar"> 
 
     <ul> 
 
     <li><a href="#homeView" class="ui-btn ui-icon-home ui-btn-icon-top">Home</a></li> 
 
     <li><a href="#findView" class="ui-btn ui-icon-search ui-btn-icon-top">Find</a></li> 
 
     <li><a href="#report" class="ui-btn ui-icon-eye ui-btn-icon-top">Report</a></li> 
 
     <li><a href="#videos" class="ui-btn ui-icon-video ui-btn-icon-top">Videos</a></li> 
 
     <li><a href="#photos" class="ui-btn ui-icon-grid ui-btn-icon-top">Photos</a></li> 
 
     </ul> 
 
    </div> 
 
    <!--navbar end--> 
 
    </div> 
 
    <!--footer end--> 
 
</div> 
 
<!--findView Page End-->

任意の助けをいただければ幸いです！

Answer 1

私はAPIキーとGoogleマップAPIの一部が必要でした。ジオコードコードは廃止されました。次のコードは機能しました：

<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV4cbTEeLmiXaPMIrEwAKB8xFGxvdDS1s&libraries=places"></script> 
     <style> 
      #mapDiv { height: 100vh; } 
      header { position: absolute; background-color: black; color: white; z-index: 1; right: 0; } 
     </style> 
    </head> 
    <body> 
     <header></header> 
     <div id="mapDiv"></div> 
     <script> 
     var apikey = "AIzaSyDV4cbTEeLmiXaPMIrEwAKB8xFGxvdDS1s", 
      map; 

     //runtime 
     $(document).ready(init); 

     function init(){ 
      //assign event listeners 

      //start the app 
      getLocation(); 
     } 

     function initMap(lat, lng){ 
      //create Google map 
      map = new google.maps.Map(document.querySelector("#mapDiv"), { 
       center: {lat: lat, lng: lng}, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       zoom: 14 
      }); 
     } 

     function getLocation(){ 
      //can we get lat/lng from this device? 
      if (!navigator || !navigator.geolocation){ 
       //handle error: lat/lng not available 
       return; 
      } 
      //get lat/lng from device 
      navigator.geolocation.getCurrentPosition(function(pos){ 
       var lat = pos.coords.latitude, 
        lng = pos.coords.longitude, 
        url = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+ lat + "," + lng +"&key=" + apikey; 

       //open Google map centered on device 
       initMap(lat, lng); 

       //get location data from Google 
       $.ajax({url: url}) 
         .done(function(data){ 
          document.querySelector("header").textContent = data.results[0].formatted_address; 
         }); 
      }); 
     } 
     </script> 
    </body> 
</html>