2010-02-07 42 views
0

我試圖創建一個應用程序,在用戶點擊的地圖上創建一個標記。然後,如果用戶點擊標記,則應顯示地址。谷歌地圖的JavaScript問題

試圖做到這一點我遇到了一個問題,到目前爲止還沒有找到解決方案。當我第一次點擊地圖時,第一個標記被創建。然後,當我嘗試點擊該標記時,不會顯示任何內容。然後在第二次點擊時出現第二個標記,如果我點擊第二個標記,第二個標記應該顯示的地址出現在第二個標記上,依此類推。所以標記地址不知怎麼流離失所,無法弄清楚問題所在。

我一直在尋找一個問題,但不能確定是什麼原因導致這種奇怪的行爲。我是JavaScript的新手,所以我不知道它是否與異步請求有關,或者我忽略了代碼中的錯誤。

的代碼如下:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> 

</script> 
<script type="text/javascript"> 
    var map; 
    var counter; 
    var latlng; 
    var locationAddress; 
    var geocoder; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    latlng = new google.maps.LatLng(46.043830, 14.488864); 
    var myOptions = { 
     zoom: 16, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    counter = 0; 

    google.maps.event.addListener(map, 'click', function(event) { 
     map.setCenter(event.latlng); 
     codeLatLng(event.latLng); 
    placeMarker(event.latLng); 
    }); 
    } 

    function placeMarker(location) { 
    var clickedLocation = new google.maps.LatLng(location); 
    latlng = location; 
    var marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 

    addLocationInfo(marker); 
} 

function addLocationInfo(marker){ 
    var infoWindow = new google.maps.InfoWindow({content: locationAddress, size: new google.maps.Size(50, 50)}); 
    google.maps.event.addListener(marker, 'click', function(){ 
     infoWindow.open(map, marker); 
    }); 
} 

function codeLatLng(latlng) { 
    if (geocoder) { 
     geocoder.geocode({'latLng': latlng}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[1]) { 
      locationAddress = results[1].formatted_address; 
      } 
     } else { 
      locationAddress = "Neznan naslov"; 
     } 
     }); 
    } 
    } 


</script> 

,我會很感激,如果有人能指出什麼是問題的原因或提出任何更好的解決方案。

謝謝!

回答

2

的問題是,地理編碼器是異步的,所以locationAddress讓你添加了infowindow與和不確定的內容後,它的價值..

addLocationInfo將不得不從地理編碼的回調函數中調用..
以下是在調用的函數級的一些細微的變化(一ND一些參數給他們)的代碼來做到這一點..

var map; 
    var counter; 
    var latlng; 
    var locationAddress; 
    var geocoder; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    latlng = new google.maps.LatLng(46.043830, 14.488864); 
    var myOptions = { 
     zoom: 16, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    counter = 0; 

    google.maps.event.addListener(map, 'click', function(event) { 
     map.setCenter(event.latlng); 
     placeMarker(event.latLng); 

    }); 
    } 

    function placeMarker(location) { 
    var clickedLocation = new google.maps.LatLng(location); 
    latlng = location; 
    var marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
    codeLatLng(location, marker); 
} 

function addLocationInfo(marker){ 
    var infoWindow = new google.maps.InfoWindow({content: locationAddress, size: new google.maps.Size(50, 50)}); 
    google.maps.event.addListener(marker, 'click', function(){ 
     infoWindow.open(map, marker); 
    }); 
} 

function codeLatLng(latlng, marker) { 
    if (geocoder) { 
     geocoder.geocode({'latLng': latlng}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[1]) { 
      locationAddress = results[1].formatted_address; 
      } 
     } else { 
      locationAddress = "Neznan naslov"; 
     } 
     addLocationInfo(marker); 
     }); 
    } 
    }