簡單谷歌地圖和地理編碼

我做了一個簡單的GoogleMap，它響應script.php?q=canada並顯示一張地圖。簡單谷歌地圖和地理編碼

一個問題是，它總是將地圖加載中心var latlng = new google.maps.LatLng(34.052234,-118.243685);一秒鐘，然後加載正確的地圖。

我的代碼有什麼問題？

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title><?=$_GET['q']?></title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
      <script type="text/javascript"> 
       var geocoder; 
       var map; 
       function initialize() { 
       geocoder = new google.maps.Geocoder(); 
       var latlng = new google.maps.LatLng(34.052234,-118.243685); 
       var address = '<?=$_GET['q']?>'; 

       var myOptions = { 
        zoom: 10, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
       geocoder.geocode({ 'address': address}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        // autozoom 
        map.fitBounds(results[0].geometry.viewport); 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: results[0].geometry.location, 
         title: 'by Quick Maps', 
         clickable: false 
        }); 
        } else { 
        alert("Geocode was not successful for the following reason: " + status); 
        } 
       }); 
       } 
      </script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas"></div> 
</body> 
</html>

Sidequestion： 如何與地圖上的一個簡單的信息替換alert("Geocode was not successful for the following reason: " + status);？

來源

2011-12-07 Lukas

快速回答是將地圖實例化移動到地理編碼回調中。

geocoder.geocode({ 'address': address}, function(results, status) { 
    var myOptions = { 
        zoom: 10, 
        center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     ... 
    });

這將阻止地圖顯示在34.052234，-118.243685的中心。

關於沒有結果返回時的用戶體驗，您可以隱藏地圖並顯示一些文本，例如？

document.getElementById('map_canvas').style.display = 'none'; 
document.getElementsByTagName('body')[0].innerHTML = 'Geocode was not successful for the following reason: " + status;

但是你想在這裏做的應該是高度依賴您的解決方案:)

來源

2011-12-07 14:03:00

'結果[0] .geometry.location'是google.maps.LatLng物件。你應該使用'results [0] .geometry.location.lat（）'和'results [0] .geometry.location.lng（）'而不是'.Pa'和'.Qa'，因爲這些變量可以改變並擁有）。 –

謝謝，我解決了答案:) –

1）谷歌地圖初始化到一個位置的通用用戶界面上的東西，然後你告訴它另一個。所以你有2個選項：

a)Move the map instantiation into the geocode callback. 
b)Initialize to the location you want. To do this you will need to read a bit more about how google maps works instead of just using their basic example.

2）至於錯誤信息，而不是研究警報，將其添加到您的HTML。

<p id="errorMessage" style="display:none;">Sorry, couldn't find that address</p>

然後顯示它而不是警報。

} else { 

    // alert("Geocode was not successful for the following reason: " + status); 
    document.getElementById('errorMessage').style.display = "block";    
}

谷歌地圖確實有其最新版本一些很好的覆蓋，但它主要是圍繞着對map--不是一般的文字信息的位置和麪積的範圍。所以你看，你需要在地圖之外的HTML頁面上面或下面創建你自己的UI。如果你真的想顯示其在地圖的上方，你可以設置在DIV的errorMessage以下CSS屬性：

#errorMessage { 
    position:absolute; 
    left: 50%; 
    top: 30%; 
}

來源

2011-12-07 14:04:29 jazzinthemorning

簡單谷歌地圖和地理編碼

回答

相關問題