說明：谷歌地圖的API好像沒法用，所以以下操作均使用百度地圖API玩敏。教程來自于百度地圖開放平臺。
1. 以下代碼創(chuàng)建了一個地圖并以天安門作為地圖的中心：
<!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>Hello, World</title>
<!-- 設置樣式，使地圖充滿整個瀏覽器窗口：-->
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密鑰
&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<!-- 創(chuàng)建地圖容器元素 地圖需要一個HTML元素作為容器输吏，這樣才能展現(xiàn)到頁面上,故創(chuàng)建個div元素 -->
<script type="text/javascript">
<!-- 命名空間 API使用BMap作為命名空間 -->
<!-- 位于BMap命名空間下的Map類表示地圖，通過new操作符可以創(chuàng)建一個地圖實例替蛉。參數(shù)可以是元素id也
可以是元素對象贯溅。-->
var map = new BMap.Map("container"); // 創(chuàng)建地圖實例
<!-- 這里我們使用BMap命名空間下的Point類來創(chuàng)建一個坐標點拄氯。Point類描述了一個地理坐標點，其中
116.404表示經(jīng)度它浅，39.915表示緯度译柏。-->
var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點坐標
map.centerAndZoom(point, 15); // 初始化地圖，設置中心點坐標和地圖級別
</script>
</body>
</html>
效果圖如下：
beijing_center_map.png
此代碼能在IE和chrome瀏覽器上正常顯示姐霍，在Edge上不能顯示艇纺，原因未知！Ｓ实黔衡！
2. 控件
地圖API中提供的控件有：
- Control：控件的抽象基類，所有控件均繼承此類的方法腌乡、屬性盟劫。通過此類您可實現(xiàn)自定義控件。
- NavigationControl：地圖平移縮放控件与纽，PC端默認位于地圖左上方侣签，它包含控制地圖的平移和縮放的功能。移動端提供縮放控件急迂，默認位于地圖右下方影所。
- OverviewMapControl：縮略地圖控件，默認位于地圖右下方僚碎，是一個可折疊的縮略地圖猴娩。
- ScaleControl：比例尺控件，默認位于地圖左下方勺阐，顯示地圖的比例關系卷中。
- MapTypeControl：地圖類型控件，默認位于地圖右上方渊抽。
- CopyrightControl：版權控件蟆豫，默認位于地圖左下方。
- GeolocationControl：定位控件懒闷，針對移動端開發(fā)十减，默認位于地圖左下方。
可以使用Map.addControl()方法向地圖添加控件愤估。在此之前地圖需要進行初始化帮辟。例如，要將標準地圖控件添加到地圖中灵疮，可在代碼中添加如下內(nèi)容：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京"); // 僅當設置城市信息時织阅，MapTypeControl的切換功能才能可用
控制控件位置和控件位置偏移可以通過參數(shù)調(diào)配壳繁。
自定義控件略復雜震捣，沒看荔棉，暫時用不上。
3. 覆蓋物
地圖API提供了如下幾種覆蓋物：
- Overlay：覆蓋物的抽象基類蒿赢，所有的覆蓋物均繼承此類的方法润樱。
- Marker：標注表示地圖上的點，可自定義標注的圖標羡棵。
- Label：表示地圖上的文本標注壹若，您可以自定義標注的文本內(nèi)容。
- Polyline：表示地圖上的折線皂冰。
- Polygon：表示地圖上的多邊形店展。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色秃流。
- Circle: 表示地圖上的圓赂蕴。
- InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息舶胀。注意：同一時刻只能有一個信息窗口在地圖上打開概说。
可以使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物嚣伐，注意此方法不適用于InfoWindow糖赔。
地圖中心點添加了一個標注，并使用默認的標注樣式轩端。
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 創(chuàng)建標注
map.addOverlay(marker); // 將標注添加到地圖中
其他如自定標注圖標放典、監(jiān)聽標注事件、可拖曳的標注基茵、內(nèi)存釋放刻撒、信息窗口、折線耿导、自定義覆蓋物等均未看声怔。
直接定位我的位置：
代碼一：
<!DOCTYPE html>
<html>
<title>HTML5調(diào)用百度地圖API進行地理定位實例</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
</head>
<body style="margin:50px 10px;">
<div id="status" style="text-align: center"></div>
<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
</body>
</html>
<script type="text/javascript">
//默認地理位置設置為上海市浦東新區(qū)
var x=121.48789949,y=31.24916171;
window.onload = function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
// 百度地圖API功能
var map = new BMap.Map("container");
var point = new BMap.Point(x,y);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
return;
}
alert("你的瀏覽器不支持獲取地理位置！");
};
function showPosition(position){
x=position.coords.latitude;
y=position.coords.longitude;
}
</script>
代碼二：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Nq6xvK1GGytlV5jsztOnIxK3RhC7823N"></script>
<title>瀏覽器定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="intro" style="text-align: center;"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(98.23533,56.56977);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
//關于狀態(tài)碼
//BMAP_STATUS_SUCCESS 檢索成功舱呻。對應數(shù)值“0”醋火。
//BMAP_STATUS_CITY_LIST 城市列表。對應數(shù)值“1”箱吕。
//BMAP_STATUS_UNKNOWN_LOCATION 位置結果未知芥驳。對應數(shù)值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 導航結果未知茬高。對應數(shù)值“3”兆旬。
//BMAP_STATUS_INVALID_KEY 非法密鑰。對應數(shù)值“4”怎栽。
//BMAP_STATUS_INVALID_REQUEST 非法請求丽猬。對應數(shù)值“5”宿饱。
//BMAP_STATUS_PERMISSION_DENIED 沒有權限。對應數(shù)值“6”脚祟。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服務不可用谬以。對應數(shù)值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超時由桌。對應數(shù)值“8”为黎。(自 1.1 新增)
</script>
注意：windows要打開定位功能，并且本地條件下只能在IE上才能實現(xiàn)定位功能行您，谷歌瀏覽器好像是無法獲取windows系統(tǒng)位置權限無法實現(xiàn)定位铭乾，（用谷歌瀏覽器打開百度地圖網(wǎng)頁，也無法定位娃循，但是Edge和IE是可以的片橡，到底是親兒子），另Edge無法正常顯示網(wǎng)頁信息淮野，可能是因為兼容問題捧书，個人猜測。只剩下IE了骤星。
