Fatal编程技术网
  • javascript/
  • Javascript 通过Google Maps API为lat/long使用变量（来自用户输入）

Javascript 通过Google Maps API为lat/long使用变量（来自用户输入）

javascript google-maps

Javascript 通过Google Maps API为lat/long使用变量（来自用户输入）,javascript,google-maps,Javascript,Google Maps,在浏览器中乱搞GoogleMapsAPI，但是我在输入变量的用户输入时遇到了一些麻烦。基本上，我希望能够通过按下页面上的按钮来输入一个新的lat/long，并将地图移动到该页面上 它不适用于实际的输入变量，但是当我使用注释掉的部分时，它工作得非常好 <body> <form id = "input" method = "get"> <input type = "text" placeholder = "Latitude" name =

在浏览器中乱搞GoogleMapsAPI，但是我在输入变量的用户输入时遇到了一些麻烦。基本上，我希望能够通过按下页面上的按钮来输入一个新的lat/long，并将地图移动到该页面上

它不适用于实际的输入变量，但是当我使用注释掉的部分时，它工作得非常好

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




在地图上标出
var lat_in=parseFloat（$（'#user_lat'）.val（）；
var lng_in=parseFloat（$（'#user_lng'）.val（）；
/*var lat_in=37.697948；
var lng_in=-97.314835*/
函数initMap（）{
var位置={lat:lat_in，lng:lng_in}；
/*var位置={lat:37.697948，lng:-97.314835}*/
var map=new google.maps.map（document.getElementById（'map'）{
缩放：13，
中心：位置
});
var marker=new google.maps.marker({
位置:位置,，
地图：地图
});
}
我怀疑这可能与我如何实际使用submit按钮以及我与它的交互方式有关，但我不是100%确定。我查过不同的东西，但我对这方面还是有点陌生。我刚开始涉足javascript，所以我确信有更好的方法可以做到这一点，但我只是想让它发挥作用，以了解它。

它不起作用的原因是，当页面首次加载时，位置仍然没有定义，因为还没有任何用户输入，因此无法设置地图中心。我建议采取以下措施：

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);
    });
}
您可以这样做，添加ChangeListener，然后在ChangePan上单击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>


方向服务
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：25%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
开始：
完:
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：{lat:0，lng:0}
});
marker=新的google.maps.marker({
地图：地图，
真的，
动画：google.maps.animation.DROP，
位置：{lat:0，lng:0}
});
var onChangeHandler=函数（）{
显示点（地图）；
};
//document.getElementById（'start'）.addEventListener（'change'，onChangeHandler）；
document.getElementById（'end'）.addEventListener（'change'，onChangeHandler）；
功能显示点（地图）{
var lat=document.getElementById（'start'）。值；
var lng=document.getElementById（'end'）。值；
var latLng=新的google.maps.latLng（lat，lng）；
标记器设置位置（板条）；
panTo地图（拉丁美洲）；
}
}

这一款与我想象的一模一样！非常感谢。