Question

我有一个javascript，它有一个搜索表单，允许用户输入一个邮政编码，它返回该邮政编码的纬度和经度值，并在地图上精确定位。如何摆脱地图并让页面显示纬度和经度值？我试图删除我认为与地图有关的所有内容，但它完全无法工作，所以我希望有人可以帮助我！

代码：

<style type="text/css">
  #map
  {
    height:400px;
    width:400px;
    display:block;
  }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY-API"></script>
<script type="text/javascript">

  function getPosition(callback) {
    //set up our geoCoder
    var geocoder = new google.maps.Geocoder();

    //get our postcode value
    var postcode = document.getElementById("postcode-bar").value;

    //send value to google to get a longitude and latitude value
    geocoder.geocode({'address': postcode}, function(results, status) {

      //callback with a status and result
      if (status == google.maps.GeocoderStatus.OK) {
        //send the values back in a JSON string
        callback({
          latt: results[0].geometry.location.lat(),
          long: results[0].geometry.location.lng()
        });
      }
    });
  }
function setup_map(latitude, longitude) {

    //create a JSON object with the values to mark the position
    var _position = { lat: latitude, lng: longitude};

    //add our default mapOptions
    var mapOptions = {
      zoom: 16              //zoom level of the map
      center: _position     //position to center
  }

    //load a map within the "map" div and display
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    //add a marker to the map with the position of the longitude and latitude
    var marker = new google.maps.Marker({
      position: mapOptions.center,
      map: map
    });
}
window.onload = function() {

    //first setup the map, with our default location of London
    setup_map(51.5073509, -0.12775829999998223);

    document.getElementById("form").onsubmit = function() {

      //when form is submitted, wait for a callback with the longitude and latitude values
      getPosition(function(position){

        //log the position returned
        var text = document.getElementById("text")
        text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";

        //update the map with the new position
        setup_map(position.latt, position.long);
      });
    }
}

</script>

</head>
<body>


<div id="postcode-search" class="input-group">

  <form action="javascript:void(0)" id="form">

    <input id="postcode-bar" class="form-control" placeholder="Enter your postcode" type="text"></input>
    <span class="input-group-btn">
      <button class="btn btn-default" id="postcode-btn" type="button">Go</button>
    </span>

  </form>

</div>

<div id="map"></div>
<div id="text"></div>

Answer 1

不要执行setup_map（）函数。

window.onload = function() {

//first setup the map, with our default location of London
setup_map(51.5073509, -0.12775829999998223);

document.getElementById("form").onsubmit = function() {

  //when form is submitted, wait for a callback with the longitude and latitude values
  getPosition(function(position){

    //log the position returned
    var text = document.getElementById("text")
    text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";

    //update the map with the new position
    setup_map(position.latt, position.long);
  });
}
}

到

window.onload = function() {
  //first setup the map, with our default location of London
  // setup_map(51.5073509, -0.12775829999998223);

    document.getElementById("form").onsubmit = function() {

      //when form is submitted, wait for a callback with the longitude and latitude values
      getPosition(function(position){

        //log the position returned
        var text = document.getElementById("text")
    text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";


    //update the map with the new position
    //setup_map(position.latt, position.long);
  });
}
}

您可以删除该功能，但您永远不知道何时需要它..

如何在此代码中删除地图？

1 个答案: