近年來隨著智能手機的普及，GPS導航地圖已經成為大家日常出行的必備工具。而這些地圖是怎樣呈現出來的呢？下面來介紹一下HTML代碼中的GPS導航地圖。

<div id="map"></div>

首先我們需要在HTML中創建一個用于顯示地圖的DIV容器，上面代碼中的id為“map”。

<script src="http://api.map.baidu.com/api?v=2.0&ak=[您的密鑰]"></script>

接著我們需要引入百度地圖API，該API提供了地圖的基礎服務，為了避免無關人員濫用，需要申請密鑰。

<script>
var map = new BMap.Map("map");  
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
</script>

然后我們需要在JavaScript中創建一個地圖實例，上述代碼創建了一個默認中心為北京市，縮放為11級的地圖實例。其中BMap是百度地圖API中的一個類。

<script>
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
</script>

如果需要顯示指定位置的地圖，可以使用上述代碼創建一個地圖中心點的Point實例，然后通過修改地圖實例中心點和縮放等級的方式顯示地圖。

<script>
var marker = new BMap.Marker(point);       
map.addOverlay(marker);                 
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
</script>

要在地圖上顯示標記點，可以使用上述代碼創建一個標記點實例，然后把該實例放入地圖中顯示。該代碼同時還可以使標記點以彈跳動畫顯示。當然，還有更多接口可以控制標記點的樣式和行為。

通過這些HTML和JavaScript代碼，我們就可以在網頁中顯示GPS導航地圖了。當然，還可以結合CSS樣式進行更加豐富的地圖顯示。