Google将带有地址表单的JavaScript实现映射到Geocoder

Question

So I'm trying to implement something as a test case as I play around with JavaScript. 因此，我在尝试使用JavaScript时尝试将其作为测试用例来实现。 I have a site where a user enters in an address then I get the latitude/longitude from google, then get a map based centered on that location. 我有一个网站，用户在其中输入地址，然后从Google获取纬度/经度，然后获取以该位置为中心的地图。

Problem is I feel as I did that, but as I go through my debugging of it, it gets the map, then seems to revert back to the main page and stock "first visit" look when the dust settles. 问题是我的感觉是这样，但是在调试过程中，它得到了地图，然后似乎又回到了主页并在尘埃落定时进行“首次访问”外观。 Anyway, here's the html (minus my api key) 无论如何，这是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

Add onsubmit="return false;" 添加onsubmit="return false;" to your form. 到您的表格。

code snippet: 代码段：

 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