简体   繁体   English

如何在此代码中摆脱地图?

[英]How do I get rid of the map in this code?

I have this piece of javascript that has a search form and allows the user to input a postcode and it returns the latitude and longitude values of that postcode as well as pinpoints it on a map. 我有一段具有搜索表单的javascript,允许用户输入邮政编码,它返回该邮政编码的纬度和经度值,并将其精确定位在地图上。 How do I get rid of the map and get the page to display just the latitude and longitude values? 如何摆脱地图并显示仅显示经度和纬度值的页面? I tried erasing what I thought was everything to do with the map but it completely failed to work so I hope somebody can help me! 我试图删除我认为与地图有关的所有内容,但是它完全无法正常工作,因此希望有人能帮我!

Code: 码:

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

Do not execute setup_map() function. 不要执行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);
  });
}
}

to

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);
  });
}
}

You could delete the function but you never know when you might need it.. 您可以删除该功能,但您永远不知道何时需要它。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM