最近對HTML5發生了興趣。因為以前就是做導航監控的，對地圖這塊也懂一點。所以在學習的過程中希望將地圖元素融入HTML5中。也當是自己給自己的練習。
於是選擇了google Map API作為介面。然後地圖的顯示理所當然就應該是基於瀏覽器的，而現在大家使用的瀏覽器很多種多樣，於是我選用了IE 8.0，chrome 12，opera 11作為測試對象。
根據找到的資料，建立了一個html5檔案，源碼如下：
<!DOCTYPE html>
<header>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>testmap</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"
/>
<script type="text/javascript">
function datainit()
{
navigator.geolocation.getCurrentPosition(function(position){
var
coords=position.coords;
//設定地圖參數，將使用者的當前位置的緯度、經度設定為地圖的中心點
var
latlng=new
google.maps.LatLng(coords.latitude,coords.longitude);
var
myOptions={
zoom:14,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//建立地圖並在“map“div中進行顯示
var
map1;
map1=new google.maps.Map(document.getElementById("map"),myOptions);
//地圖上建立標記
var
marker=new google.maps.Marker({
position:latlng,
map:map1
});
//設定標註視窗，並指定該視窗中的注釋文字
var
infowindow=new google.maps.InfoWindow({
content:"當前位置！"
});
//開啟標註視窗
infowindow.open(map1,marker);
});
}
</script>
</header>
<body onload = "datainit();">
<div id="map" style="width:400px; height:400px"></div>
</body>
以上源碼在Opera中運行正常，我能夠看到想要的地圖。但是在IE和Chrome中都不能正常運行，提示找不到datainit（）這個對象。感覺挺奇怪的，以前也沒碰到類似的情況啊。抱著僥倖的心理把datainit()函數搬到一個.js的檔案中，竟然奇蹟般的能在chrome瀏覽器中顯示地圖了（到現在還不是太明白，有誰瞭解的請指點一二），但在IE裡還是不行，這時候在IE裡報的錯誤是“navigator.geolocation 為空白或不是對象”（到目前也沒有解決）。
總結一下，跨平台，多瀏覽器的開發確實困難。需要考慮的東西太多了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
