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

我有這樣一段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>

來源

2016-04-22 Tobi Ajala

張貼的代碼不能正常工作原樣。 '未捕獲的SyntaxError：意外的標識符' – geocodezip

因爲您無法訪問我的API，但現在我的問題得到了解答，謝謝。 –

不要執行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); 
    }); 
} 
}

你可以刪除的功能，但你永遠不知道什麼時候會需要它..

來源

2016-04-22 13:48:30 Filchev

很好，謝謝。 –

我很高興我可以幫助:) – Filchev

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

回答

相關問題