Question

我想在提交表单后显示用户的地址Google Maps Api，但在提交后会重置地图。如何输入表单中的信息（信息从表单中消失的位置）并保持Google API显示位置？

这是我的代码：

＆＃13;

var User = function User (name, address, email, phone, website) {
    this.name = name;
    this.address = address;
    this.email = email;
    this.phone = phone;
    this.website = website;
    return this;
};

var myStorage = window.localStorage;

$(document).ready(function () {
    $("#form").submit(function () {

        var inputs = $("#form :input");
        var values = [];

        inputs.each(function () {
            values.push($(this).val());
        });

        var name = values[0];
        var address = values[1];
        var email = values[2];
        var phone = values[3];
        var website = values[4];
        var user = new User(name, address, email, phone, website);
        myStorage.setItem(email, user);

    });

});

＆＃13;

#calculator {
    width: 310px;
    height: 360px;
    margin: 10px auto;
    padding: 5px;
    background-color: #999;
    border: 3px solid black;
    border-radius: 10px;
    text-decoration: none;
}
#total {
	height: 70px;
    width: 300px;
    display: block;
    margin:auto;
    background-color:white;
    margin-bottom: 5px;
    text-align: right;
    font-size: 60px;
    padding: 0 5px;
    white-space:nowrap;
    overflow:auto;
}
input {
    width: 60px;
    height: 45px;
    padding: auto;
    margin: 5px 6px;
    text-align: center;
    border-radius: 10px;
    font-size: 40px;
    vertical-align: middle;
    word-wrap: break-word;
}

#equals {
	width: 215px;
}

#clearall {
	font-size: 30px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
   <script language="JavaScript" type="text/javascript" src="./../Controller/main.js"></script>
    <script language="JavaScript" type="text/javascript" src="./../Model/User.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCv7cEqzgOMNus_dXIMf98XvWBFtY5-W4o&libraries=geometry">
    </script>
</head>
<body onload="initialize()">
<div id="context">

    <div id="inputform">
        <form id="form" >
            <label><b>Name:</b></label><input type="text" name="name" autofocus required>
            <label><b>Address:</b></label><input type="text" id="address" name="address" required>
            <label><b>Email:</b></label><input type="email" name="email" required>
            <label><b>Phone:</b></label><input type="tel" name="phone" required>
            <label><b>Website:</b></label><input type="url" name="website" required>
            <input type="submit" value="Submit" id="submit" onclick="codeAddress()" >
        </form>
    </div>

    <div id="map">
    </div>

</div>

<script>
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom: 8,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
    }

    function codeAddress() {
        var addressId = document.getElementById('address').value;
        geocoder.geocode( { 'address': addressId}, function(results, status) {
            if (status == 'OK') {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
</script>

</body>
</html>

＆＃13;

我还希望隐藏Google Maps API，直到我们提供信息后提交并显示表单，但它只显示了一小部分时间。有人可以帮忙吗？

Answer 1

这就是你遇到闪烁的原因：

您的表单正在提交到同一页面，因为这是默认设置当没有指定动作时，表单的作用。所以提交时，你应该import datetime import scrapy oldest = datetime.datetime.strptime('2017-09-14', '%Y-%m-%d') def _iterloc(it, alt=False): for d in it: lastmod = datetime.datetime.strptime(d['lastmod'], '%Y-%m-%d') if lastmod > oldest: yield d['loc'] # Also consider alternate URLs (xhtml:link rel="alternate") if alt and 'alternate' in d: for l in d['alternate']: yield l scrapy.spiders.sitemap.iterloc = _iterloc # your spider code here来阻止它。
如果您执行event.preventDefault();，则无法隐藏它并使用jquery hide / show显示它。如果您计划仅首先显示表单，请在表单提交后初始化地图。

我简化了您的代码，使其更加简单，更接近geocodezip建议的最小，完整和可验证的示例。

希望它有所帮助。

onload=initialize()

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 4,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function codeAddress() {
    var addressId = document.getElementById('address').value;
    geocoder.geocode( { 'address': addressId}, function(results, status) {
        if (status == 'OK') {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

$(document).ready(function () {
    
    $("#form").submit(function (event) {
      event.preventDefault();
      initialize();
      codeAddress()
      $('#map').removeClass('hidden');
      $('#inputform').hide();
    });
});

input {
  display: block;
  margin: 15px;
}

#map {
  height: 500px;
}

Google Maps API。在我提交表单时，地址会在显示之前消失

1 个答案: