Google將帶有地址表單的JavaScript實現映射到Geocoder

Question

因此，我在嘗試使用JavaScript時嘗試將其作為測試用例來實現。 我有一個網站，用戶在其中輸入地址，然后從Google獲取緯度/經度，然后獲取以該位置為中心的地圖。

問題是我的感覺是這樣，但是在調試過程中，它得到了地圖，然后似乎又回到了主頁並在塵埃落定時進行“首次訪問”外觀。 無論如何，這是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()
        });

Answer 1

添加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>

Google將帶有地址表單的JavaScript實現映射到Geocoder

問題描述

1 個解決方案

解決方案1
0 已采納 2015-11-19 04:59:47

Google將帶有地址表單的JavaScript實現映射到Geocoder

問題描述

1 個解決方案

解決方案1 0 已采納 2015-11-19 04:59:47

解決方案1
0 已采納 2015-11-19 04:59:47