如何在初始化期間在Google Maps API上動態設置縮放值

我有如下的代碼。如何在初始化期間在Google Maps API上動態設置縮放值

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #map { height: 100%; } 
    </style> 
    </head> 
    <body> 
    <input type="hidden" id="zoom_data" value="8"> 
    <div id="map"></div> 
    <script type="text/javascript"> 

var map; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: $('zoom_data').val() 
    }); 
} 

    </script> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html>

但地圖變爲空白。我只想在本地而不是從服務器動態設置縮放。有什麼建議？

來源

2015-12-17 Brian Kernighan

將它設置爲...什麼？您可以在創建地圖時指定縮放屬性，或者在創建地圖後調用'map.setZoom（）'。 – duncan

試試這個：'$（'＃zoom_data'）.val（）'。你的選擇器無效.. – Rayon

請嘗試下面的代碼。您需要使用document.getElementById（）來獲取隱藏字段的值，然後將其轉換爲數字，然後將其用作縮放參數。

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #map { height: 100%; } 
    </style> 
    </head> 
    <body> 
    <input type="hidden" id="zoom_data" value="8"> 
    <div id="map"></div> 
    <script type="text/javascript"> 

var map; 
function initMap() { 
    var zoom = document.getElementById('zoom_data').value; 
    var nZoom = Number(zoom); 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: nZoom 
    }); 
} 

</script> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
</script>

希望它能幫助！

來源

2015-12-17 10:28:27 goblin

哇，它的作品像魅力:) –

如何在初始化期間在Google Maps API上動態設置縮放值

回答

相關問題