全局變量javascript無法正常工作

Question

我正在一個網站中嘗試使用Google地圖。該頁面使用php從數據庫中獲取值。然後它將其中一個列值傳遞給一個javascript函數，該函數使用Google Maps進行繪製。現在，我想要在單個地圖中顯示所有值的圖表。

我附加了javascript函數和php調用。這裏是代碼：

<script type="text/javascript"> 

var myOptions; 
var map; 
var geocoder; 
var first_call = 0; 

function map_function(addr){ 
    // Define the addresses we want to map. 
    var clubs = addr; 
    // Create a new Geocoder 
    if (first_call == 0){ 
     var geocoder = new google.maps.Geocoder(); 
    } 
    // Locate the address using the Geocoder. 
    geocoder.geocode({ "address": clubs }, function(results, status) { 
     // If the Geocoding was successful 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (first_call == 0){ 
       // Create a Google Map at the latitude/longitude returned by the Geocoder. 
       // Create Once 
       alert("Initializing Map"); 
       var myOptions = { 
        zoom: 16, 
        center: results[0].geometry.location, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       //Initialise once 
       var map = new google.maps.Map(document.getElementById("map"), myOptions); 
      } 
      // Add a marker at the address. 
      alert("Plotting address"); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
     } else { 
       try { 
        console.error("Geocode was not successful for the following reason: " + status); 
       } catch(e) {} 
      } 
    }); 
    first_call = first_call + 1; 
    alert (first_call); 
} 
</script> 
<?php 
while($row = mysqli_fetch_array($result)){ 
    $addr = $row['ADDRESS']; 
    echo '<script type="text/javascript">map_function("{$addr}");</script>'; 
?> 

我知道地圖及其選項應該只初始化一次。所以我使用first_call跟蹤函數調用，並確保地圖僅在第一次調用時被初始化。此外，我將地圖，選項和地理編碼聲明爲全局變量。不幸的是，我沒有得到任何輸出。我真的很新的JavaScript，我不知道我哪裏錯了。

焦急等待解決方案。

Answer 1

我不知道php代碼，但你的javascript代碼有幾個錯誤。

首先您將mapOptions,map和geocoder定義爲全局，然後在本地重新定義它們中的每一個。因此，變量前面的var在函數map_function中被刪除。

下一個阻止該映射被初始化的變量是first_call變量的更新。由於geocode()是異步函數，因此first_call設置爲1，即使在代碼達到檢查if (first_call == 0){之前，它也會進一步增加。所以地圖永遠不會被初始化。在此代碼

<script type="text/javascript"> 

var myOptions; 
var map; 
var geocoder; 
var first_call = 0; 

function map_function(addr){ 
    // Define the addresses we want to map. 
    var clubs = addr; 

    // Create a new Geocoder 
    if (first_call == 0){ 
     geocoder = new google.maps.Geocoder(); // var deleted 
    } 
    // Locate the address using the Geocoder. 
    geocoder.geocode({ "address": clubs }, function(results, status) { 
     // If the Geocoding was successful 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (first_call == 0){ 
       // Create a Google Map at the latitude/longitude returned by the Geocoder. 
       // Create Once 
       console.log("Initializing Map"); 
       myOptions = { 
        zoom: 16, 
        center: results[0].geometry.location, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       //Initialise once 
       map = new google.maps.Map(document.getElementById("map"), myOptions); 
      } 
      // Add a marker at the address. 
      console.log("Plotting address"); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 

      first_call = first_call + 1; 
      console.log (first_call); 
     } else { 
       try { 
        console.error("Geocode was not successful for the following reason: " + status); 
       } catch(e) {} 
      } 
    }); 
    // wrong place because of async call: map is never initialized 
    //first_call = first_call + 1; 
    //console.log (first_call); 
} 

var addresses = ['Paris', 'London', 'Berlin']; 
for (var i = 0; i < addresses.length; i++) { 
    map_function(addresses[i]); 
} 

</script> 

Answer 2

只是一點輸出模板的事故。沒什麼大的。 我已經爲你正確地重寫了它。

<?php 
while($row = mysqli_fetch_array($result)){ 
    $addr = $row['ADDRESS']; 
    echo '<script type="text/javascript">map_function(' . $addr . ');</script>'; 
?>