如何在此代碼中擺脫地圖？

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 個解決方案

解決方案1
1 已采納 2016-04-22 13:48:30

如何在此代碼中擺脫地圖？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-04-22 13:48:30

解決方案1
1 已采納 2016-04-22 13:48:30