Question

在浏览器中使用Google Maps API，但是我在为变量输入用户输入时遇到了一些麻烦。基本上，我希望能够通过按下页面上的按钮放入一个新的纬度/长度，并将地图移动到该位置。

它不适用于实际的输入变量，但是当我使用注释掉的部分时，它完全正常。

    <body>
    <form id = "input" method = "get">
        <input type = "text" placeholder = "Latitude" name = "user_lat">
        <input type = "text" placeholder = "Longitude" name = "user_lng"><br>
        <button type = "submit">Mark on Map</button>
    </form>
    <div id = "map"></div>
        <script>
            var lat_in = parseFloat($('#user_lat').val());
            var lng_in = parseFloat($('#user_lng').val());
            /*var lat_in = 37.697948;
            var lng_in = -97.314835;*/
            function initMap() {
                var location = {lat: lat_in, lng: lng_in};
                /*var location = {lat: 37.697948, lng: -97.314835};*/
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 13,
                    center: location
                    });
                var marker = new google.maps.Marker({
                    position: location,
                    map: map
                    });
            }
    </script>
    <script async defer
    src="link with the API key here">
    </script>

我怀疑它可能有一些事情可以做我如何实际使用提交按钮以及我与它互动的方式，但我并非100％肯定。我查了不同的东西，但我还是有点新鲜。我刚刚开始涉足javascript，所以我确信有更好的方法可以做到这一点，但我只想让这个工作来理解它。

Answer 1

您可以这样做，添加更改侦听器，并通过单击enter

将更改平移到该位置

    <!DOCTYPE html>
 <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
  }
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<input id="start" type="text"
        placeholder="Enter lat">
<b>End: </b>
 <input id="end" type="text"
        placeholder="Enter lng">
</div>
<div id="map"></div>
<script>
  function initMap() {

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

marker = new google.maps.Marker({
                map:map,
                draggable:true,
                animation: google.maps.Animation.DROP,
                position: {lat: 0,  lng:  0}
            });
    var onChangeHandler = function() {
      DisplayPoint(map);
    };
    //document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);


  function DisplayPoint(map) {

      var lat = document.getElementById('start').value;
      var lng = document.getElementById('end').value;
      var latLng = new google.maps.LatLng(lat, lng);
      marker.setPosition(latLng);
      map.panTo(latLng);

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

Answer 2

它不起作用的原因是因为当页面第一次加载时，由于还没有任何用户输入，因此仍未定义位置，因此您无法设置地图中心。我建议做类似以下的事情：

function initMap() {
    var location = {lat: 37.697948, lng: -97.314835};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: location
        });
    $('#input').on('submit', function(e){
      e.preventDefault();
      var lat_in = parseFloat($('#user_lat').val());
      var lng_in = parseFloat($('#user_lng').val());
      location = {lat: lat_in, lng: lng_in};
      var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        map.panTo(location);
    });
}

使用谷歌地图API的lat / long变量（来自用户输入）

2 个答案: