谷歌地圖JavaScript實現與表格地址到地址解析器的形式

所以我試圖實現一些東西作爲測試用例，因爲我玩弄JavaScript。我有一個網站，用戶輸入一個地址，然後我從谷歌獲取緯度/經度，然後得到一個基於該地點爲中心的地圖。谷歌地圖JavaScript實現與表格地址到地址解析器的形式

問題是我感覺像我那樣做，但是當我通過調試它時，它得到了地圖，然後似乎恢復到主頁面，並在塵埃落定的時候存儲「第一次訪問」的外觀。總之，這裏的HTML（減去我的API密鑰）

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <link rel = "stylesheet" type = "text/css" href = "Project2.css"> 
    <script src = "jsfile.js"></script> 

    </head> 
    <body> 

    <Form class = "leftStuff"> 
    <label for = "address">Address:</label> 
    <input type = "text" id = "addrQuery" name = "address"/> 
    <button onclick='BeenClicked()'>Add</button> 
    </Form> 



    <div id="parent"> 
    <div id = "sidebuttons"> 
     <ul id ="rctSearchList"> 
     </ul> 
    </div> 
    <div id="mapHolder" class = "leftStuff"> 
     <div id="map"></div> 
    </div> 
    </div> 

    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
    </script> 

    </body> 
</html> 

//begin jsfile.js 
    function initMap() { 
     var map; 
     if($('#rctSearchList').children().length <= 0) 
     { 
      map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat:41.08394699999999, lng: -74.176609}, 
      zoom: 8 
      }); 
     } 
     else 
     { 
      var lat = $('#rctSearchList li:last-child').data('coords').lat; 
      var lng = $('#rctSearchList li:last-child').data('coords').lng; 
      console.log(lat); 

      map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat:lat, lng: lng}, 
      zoom: 8 
      }); 
     } 
    } 

    function BeenClicked() 
    { 
     var address = document.getElementById('addrQuery').value; 
     //replace each space with a plus sign 
     address = address.replace(/ /g, '+'); 

     //get the json document from google 
     var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false"; 


     var jax = $.get(url, function(data, status){ 

       var latitude = data.results[0].geometry.location.lat 
       var longitude = data.results[0].geometry.location.lng; 
       address = data.results[0].formatted_address; 

       var str = "<li>" + address + "</li>"; 
       var li = $(str); 

       li.data("coords", {lat :latitude, lng : longitude }); 


       li.css("background-color : gray"); 


       $("#rctSearchList").append(li); 
       initMap() 
     });

來源

2015-11-19 gbux

添加onsubmit="return false;"到表單中。

代碼片段：

function initMap() { 
 
    var map; 
 
    if ($('#rctSearchList').children().length <= 0) { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
     lat: 41.08394699999999, 
 
     lng: -74.176609 
 
     }, 
 
     zoom: 8 
 
    }); 
 
    } else { 
 
    var lat = $('#rctSearchList li:last-child').data('coords').lat; 
 
    var lng = $('#rctSearchList li:last-child').data('coords').lng; 
 
    console.log(lat); 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
     lat: lat, 
 
     lng: lng 
 
     }, 
 
     zoom: 8 
 
    }); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap); 
 

 
function BeenClicked() { 
 
    var address = document.getElementById('addrQuery').value; 
 
    //replace each space with a plus sign 
 
    address = address.replace(/ /g, '+'); 
 

 
    //get the json document from google 
 
    var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + address; 
 

 

 
    var jax = $.get(url, function(data, status) { 
 

 
    var latitude = data.results[0].geometry.location.lat 
 
    var longitude = data.results[0].geometry.location.lng; 
 
    address = data.results[0].formatted_address; 
 

 
    var str = "<li>" + address + "</li>"; 
 
    var li = $(str); 
 

 
    li.data("coords", { 
 
     lat: latitude, 
 
     lng: longitude 
 
    }); 
 

 

 
    li.css("background-color : gray"); 
 

 

 
    $("#rctSearchList").append(li); 
 
    initMap() 
 
    }); 
 
}

html, 
 
body, 
 
#parent, 
 
#mapHolder, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<Form class="leftStuff" onsubmit="return false;"> 
 
    <label for="address">Address:</label> 
 
    <input type="text" id="addrQuery" name="address" value="New York, NY" /> 
 
    <button onclick='BeenClicked()'>Add</button> 
 
</Form> 
 
<div id="parent"> 
 
    <div id="sidebuttons"> 
 
    <ul id="rctSearchList"></ul> 
 
    </div> 
 
    <div id="mapHolder" class="leftStuff"> 
 
    <div id="map"></div> 
 
    </div> 
 
</div>

來源

2015-11-19 04:59:47 geocodezip

謝謝。它的工作，要去看看爲什麼。對不起，格式不好，我通常潛伏和搜索。我不是一個大海報。再次感謝！ – gbux

谷歌地圖JavaScript實現與表格地址到地址解析器的形式

回答

相關問題