用户提交位置后重新居中 Google 地图

Question

我正在构建一个旅行计划器，要求用户输入并提交 s/he 前往的城市名称。我启动了地图并将第一个位置设置为 SF，但我希望它根据用户输入的位置重新居中。

这是两个参考资料（除了 Google 地图 API 文档之外）我在发布之前遵循了这些参考资料 - 对我来说都没有用（我显然遗漏了一些东西）。我发现 map.setCenter() 不是函数。

Google Maps SetCenter function refusing to work

Google Maps API v3: How to Set Zoom Level And Map Center To User Submitted Location?

          <h3>I'm traveling to: </h3>
          <input class="inputBox" type="text" name="destination" id="destination" placeholder="e.g., Barcelona, Spain or China" maxlength="35">
          <input type="submit" class="form" id="form">


  <script type="text/javascript">

  function initMap() {
  var myLatlng = {lat: 37.7751, lng: -122.4194};

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

var button = document.querySelector("input.form");
    var userSelectLat;
    var userSelectLng;

    //add an event listener which executes the callback function, geoLocation, when the Submit button is clicked
    button.addEventListener("click", getLocation);

    function getLocation(event) {
      event.preventDefault()
      //store city entered into a variable, put it in quotes, and add that to the geocode URL
      var city = document.querySelector("input#destination.inputBox").value;
      var cityInQuotes = "\"" + city + "\""
      var geocodeURL = "https://maps.googleapis.com/maps/api/geocode/json?address="+cityInQuotes+"AIzaSyBMEriLb8zqxFSVBWArM6n3MxonN5d-cLY";
      //return JSON and
      $.get(geocodeURL,printCoordinates)
  }

  function printCoordinates(results) {
    if (results.status === "ZERO_RESULTS") {
      alert("Location not found. Try searching for a city or more specific location.")
  } else {
    userSelectLat = results.results[0].geometry.location.lat;
    userSelectLng = results.results[0].geometry.location.lng;
    console.log('arrayresults = '+userSelectLat,userSelectLng);
    }
    //re-center map based on new location
    var relocate = new google.maps.LatLng(userSelectLat, userSelectLng);
    alert("setting the center to: " + relocate);
    map.setCenter(relocate);
}

Answer 1

我刚刚弄明白了！

我在 initMap 函数外定义了变量 map，然后在 initMap 函数内删除了 map 前面的 "var"，因此它更新了全局 map 变量，而不是仅将其存储在 initMap 中。做到了！

用户提交位置后重新居中 Google 地图

Re-center Google Map after user submits location

javascript

api

location

google-maps

center