友情提示鏈接：ES6系列（一）迭代器、for-of循環(huán)和生成器 Generators
在HTML5的新標(biāo)準(zhǔn)中吵聪，有了用于地圖的使用地理位置定位的api凌那，其由geolocation 對(duì)象來(lái)進(jìn)行擔(dān)任相關(guān)的使用。
一吟逝、簡(jiǎn)介
首先簡(jiǎn)單的介紹一下官方對(duì)于geolocation 對(duì)象的介紹：
geolocation對(duì)象：地理位置 API帽蝶，通過(guò)接口可以使用javascript定位當(dāng)前用戶所在位置，其是window對(duì)象中瀏覽器對(duì)象的內(nèi)置對(duì)象（即由navigator.geolocation提供）块攒。其允許用戶向 Web 應(yīng)用程序提供他們的位置励稳。同時(shí)出于隱私考慮，報(bào)告地理位置前會(huì)先請(qǐng)求用戶許可囱井。如果該對(duì)象存在驹尼，那么地理位置服務(wù)可用。
下面附上用于判斷兼容使用的JS和兼容瀏覽器：
if ("geolocation" in navigator) {
/* 地理位置服務(wù)可用 */
}else{
/* 地理位置服務(wù)不可用 */
}
二琅绅、使用：
geolocation 對(duì)象封裝了獲取當(dāng)前用戶所在位置的方法和屬性扶欣，我們可以通過(guò)這些方法和屬性進(jìn)行我們需要的操作
（1）獲取geolocation 對(duì)象方式：
window.navigator.geolocation;
如果不兼容獲取的對(duì)象為null；
（2）獲取當(dāng)前定位：
可以調(diào)用getCurrentPosition()函數(shù)獲取用戶當(dāng)前定位位置。這會(huì)異步地請(qǐng)求獲取用戶位置料祠，并查詢定位硬件來(lái)獲取最新信息骆捧。
語(yǔ)法：navigator.geolocation.getCurrentPosition(success,error,options)
參數(shù)：
success：成功得到位置信息時(shí)的回調(diào)函數(shù)，使用Position對(duì)象作為唯一的參數(shù)髓绽。
error：可選敛苇，獲取位置信息失敗時(shí)的回調(diào)函數(shù)，使用PositionError對(duì)象作為唯一的參數(shù)顺呕，這是一個(gè)可選項(xiàng)枫攀。
options：可選，一個(gè)可選的PositionOptions對(duì)象株茶。
當(dāng)定位被確定后来涨，定義的回調(diào)函數(shù)success就會(huì)被執(zhí)行。第二個(gè)回調(diào)函數(shù)error启盛，當(dāng)有錯(cuò)誤時(shí)會(huì)被執(zhí)行蹦掐。第三個(gè)參數(shù)options也是可選的，您可以通過(guò)該對(duì)象參數(shù)設(shè)定最長(zhǎng)可接受的定位返回時(shí)間僵闯、等待請(qǐng)求的時(shí)間和是否獲取高精度定位卧抗。
window.navigator.geolocation.getCurrentPosition(function (position) {
do_something(position.coords.latitude,position.coords.longitude); // 自定義的一個(gè)函數(shù)do_something
});
上述示例中，當(dāng)獲取位置后do_something()函數(shù)會(huì)被執(zhí)行鳖粟。
關(guān)于失敗的回調(diào)函數(shù)其是以PositionError為第一個(gè)參數(shù)社裆。
functionerrorCallback (error) {
alert('ERROR('+error.code+'): '+error.message);
};
注：目前谷歌提供的js的api無(wú)法訪問(wèn)。
（3）監(jiān)視定位：
可以設(shè)定一個(gè)回調(diào)函數(shù)來(lái)響應(yīng)定位數(shù)據(jù)發(fā)生的變更（設(shè)備發(fā)生了移動(dòng)向图，或獲取到了更高精度的地理位置信息）泳秀，通過(guò)watchPosition()函數(shù)實(shí)現(xiàn)該功能（即Geolocation.watchPosition()用于注冊(cè)監(jiān)聽器，在設(shè)備的地理位置發(fā)生改變的時(shí)候自動(dòng)被調(diào)用）张漂。它與getCurrentPosition()接受相同的參數(shù)晶默，但回調(diào)函數(shù)會(huì)被調(diào)用多次谨娜。錯(cuò)誤回調(diào)函數(shù)與getCurrentPosition()中一樣是可選的航攒，也會(huì)被多次調(diào)用。
var watchID = navigator.geolocation.watchPosition(function(position){
do_something(position.coords.latitude,position.coords.longitude);
});
去除監(jiān)視：
Geolocation.watchPosition()方法會(huì)返回一個(gè) ID趴梢，如要取消監(jiān)聽可以通過(guò)Geolocation.clearWatch()傳入該 ID 實(shí)現(xiàn)取消的目的漠畜。
navigator.geolocation.clearWatch(watchID);
注：可以直接調(diào)用
watchPosition()函數(shù)，不需要先調(diào)用getCurrentPosition()函數(shù)坞靶。
附上watchPosition 實(shí)際使用示例:http://www.thedotproduct.org/experiments/geo/
再附上相關(guān)代碼即相關(guān)網(wǎng)站地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation
二·百度地圖
1．簡(jiǎn)介：
Baidu地圖同時(shí)提供了一組API接口憔狞，供其他軟件公司使用，通過(guò)這些API接口彰阴，開發(fā)者也可以在自己的程序中嵌入百度地圖瘾敢。
我們常用的API接口分類：
- web開發(fā)類：提供面向web開發(fā)的地圖接口
- Android開發(fā)類：提供Android開發(fā)的各種接口。
- IOS開發(fā)類：提供IOS開發(fā)的各種接口。
- 其他服務(wù)接口：包含云服務(wù)簇抵、車聯(lián)網(wǎng)服務(wù)等接口庆杜。
- 工具支持：API控制臺(tái)、云編輯器等碟摆。
一般的接口在開發(fā)時(shí)都是免費(fèi)的晃财，但在運(yùn)營(yíng)的時(shí)候都要收取費(fèi)用。
百度地圖JavaScript API是一套由JavaScript語(yǔ)言編寫的應(yīng)用程序接口典蜕，可在網(wǎng)站中構(gòu)建功能豐富断盛、交互性強(qiáng)的地圖應(yīng)用，支持PC端和移動(dòng)端基于瀏覽器的地圖應(yīng)用開發(fā)愉舔，且支持HTML5特性的地圖開發(fā)钢猛。
該套API免費(fèi)對(duì)外開放。自v1.5版本起轩缤，需先申請(qǐng)密鑰（ak）才可使用厢洞，接口（除發(fā)送短信功能外）無(wú)使用次數(shù)限制。
2.獲取密鑰
官網(wǎng)地址：http://developer.baidu.com/map/
JavaScript API大眾版:http://developer.baidu.com/map/index.php?title=jspopular
3.功能簡(jiǎn)介
主要功能如下：
- 基本地圖功能：展示（支持2D圖典奉、3D圖躺翻、衛(wèi)星圖）、平移卫玖、縮放公你、拖拽等。
- 地圖控件展示功能：可以在地圖上添加/刪除鷹眼假瞬、工具條陕靠、比例尺、自定義版權(quán)脱茉、地圖類型及定位控件剪芥，并可以設(shè)置各類控件的顯示位置。
- 覆蓋物功能：支持在地圖上添加/刪除點(diǎn)琴许、線税肪、面、熱區(qū)榜田、行政區(qū)劃益兄、用戶自定義覆蓋物等；開源庫(kù)提供富標(biāo)注箭券、標(biāo)注管理器净捅、聚合marker、自定義覆蓋物等功能辩块。
- 工具類功能：提供經(jīng)緯度坐標(biāo)與屏幕坐標(biāo)互轉(zhuǎn)功能蛔六；開源庫(kù)里提供測(cè)距荆永、幾何運(yùn)算及GPS坐標(biāo)/國(guó)測(cè)局坐標(biāo)轉(zhuǎn)百度坐標(biāo)等功能。
- 定位功能：支持IP定位及瀏覽器（支持html5特性瀏覽器）定位功能国章。
- 右鍵菜單功能：支持在地圖上添加右鍵菜單屁魏。
- 鼠標(biāo)交互功能：支持動(dòng)態(tài)修改鼠標(biāo)樣式、鼠標(biāo)拖拽/縮放地圖及鼠標(biāo)繪制等功能捉腥。
- 圖層功能：支持重設(shè)地圖底圖氓拼、地圖上疊加實(shí)時(shí)交通圖層或自定義圖層功能。
- 本地搜索功能：包括根據(jù)城市抵碟、矩形范圍桃漾、圓形范圍等條件進(jìn)行POI搜索；且支持用戶自有數(shù)據(jù)的檢索拟逮。
- 公交檢索：支持起始點(diǎn)坐標(biāo)撬统、起始點(diǎn)名稱、LocalSearchPoi實(shí)例三種檢索條件的檢索敦迄；檢索結(jié)果支持便捷恋追、可換乘、少步行罚屋、不乘地鐵四種方案苦囱。
- 駕車檢索：支持起始點(diǎn)坐標(biāo)、起始點(diǎn)名稱脾猛、LocalSearchPoi實(shí)例三種檢索條件的檢索撕彤；返回最短時(shí)間、最短距離猛拴、避開高速的駕車導(dǎo)航結(jié)果羹铅；且提供計(jì)算打車費(fèi)用服務(wù)。
- 步行導(dǎo)航：提供步行導(dǎo)航方案愉昆。
- 逆/地理編碼：支持百度坐標(biāo)與地址描述信息之間的轉(zhuǎn)換服務(wù)职员。
- 個(gè)性化數(shù)據(jù)展示功能：用戶自有數(shù)據(jù)存儲(chǔ)到LBS.云后，JavaScript API可以提供以麻點(diǎn)圖形式展示自有數(shù)據(jù)功能跛溉。
三·百度地圖實(shí)戰(zhàn)
1.入門程序
（1）引入baidu地圖的javascrpt文件（http路徑訪問(wèn)百度地圖api官網(wǎng)）
<script src="http://api.map.baidu.com/api?v=1.5&ak=密鑰" type="text/javascript"></script>
（2）編寫html代碼（百度地圖會(huì)根據(jù)id設(shè)定div中的內(nèi)容）：
<div id=" myMap " style="width:500px;height:320px"></div>
（3）調(diào)用api初始化地圖
//根據(jù)div的id= map的map構(gòu)建地圖內(nèi)存對(duì)象焊切。
//BMap是百度地圖類，封裝了顯示百度地圖的方法和屬性倒谷，參數(shù)為容器所對(duì)應(yīng)的id
var map = new BMap.Map("myMap");
map.enableScrollWheelZoom();//啟用滾輪放大縮小
縮放等級(jí)介紹圖:
縮放等級(jí)介紹圖
（4）構(gòu)建在地圖上要顯示的區(qū)域中心點(diǎn)位置121.491, 31.233可以理解為橫坐標(biāo)和縱坐標(biāo)蛛蒙，即經(jīng)度緯度
var point = new BMap.Point(121.491, 31.233);
// 顯示地圖糙箍，并設(shè)定地圖等級(jí)
map.centerAndZoom(point, 3); //縮放等級(jí)
2.核心API
（1）Map類：
此類是地圖API的核心類渤愁，用來(lái)實(shí)例化一個(gè)地圖。以下多的API則截圖給一些常用方法：
a.構(gòu)造函數(shù)
| 構(gòu)造函數(shù) | 描述 |
| -
| Map(container:String或HTMLElement[, opts:MapOptions]) | 在指定的容器內(nèi)創(chuàng)建地圖實(shí)例深夯，之后需要調(diào)用Map.centerAndZoom()方法對(duì)地圖進(jìn)行初始化抖格。未進(jìn)行初始化的地圖將不能進(jìn)行任何操作 |
b.配置方法
c.獲取地圖狀態(tài)的API
d.修改地圖狀態(tài)的API
（2）控件：
百度地圖上負(fù)責(zé)與地圖交互的UI元素稱為控件诺苹。百度地圖API中提供了豐富的控件，您還可以通過(guò)Control類來(lái)實(shí)現(xiàn)自定義控件雹拄。
a.地圖API中提供的控件：
- Control：所有控件均繼承此類的方法收奔、屬性。通過(guò)此類您可實(shí)現(xiàn)自定義控件滓玖。
- NavigationControl：地圖平移縮放控件坪哄，PC端默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能势篡。移動(dòng)端提供縮放控件翩肌，默認(rèn)位于地圖右下方。
- OverviewMapControl：縮略地圖控件禁悠，默認(rèn)位于地圖右下方念祭，是一個(gè)可折疊的縮略地圖。
- MapTypeControl：地圖類型控件碍侦，默認(rèn)位于地圖右上方粱坤。
- CopyrightControl：版權(quán)控件，默認(rèn)位于地圖左下方瓷产。
- GeolocationControl：定位控件站玄，針對(duì)移動(dòng)端開發(fā)，默認(rèn)位于地圖左下方
b.引入控件：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
可以向地圖添加多個(gè)控件濒旦。在本例中我們向地圖添加一個(gè)平移縮放控件蜒什、一個(gè)比例尺控件和一個(gè)縮略圖控件。在地圖中添加控件后疤估，它們即刻生效灾常。
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
c.刪除控件：
刪除控件:map.removeControl(control);
d.修改控件：
| 構(gòu)造函數(shù) | 描述 |
| -
| setAnchor(anchor:enum ControlAnchor) | 設(shè)置控件停靠的位置 |
| getAnchor | 返回控件土迥矗靠的位置 |
其中setAnchor()方法的anchor允許的值為：
- BMAP_ANCHOR_TOP_LEFT表示控件定位于地圖的左上角钞瀑。
- BMAP_ANCHOR_TOP_RIGHT表示控件定位于地圖的右上角。
- BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地圖的左下角慷荔。
- BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位于地圖的右下角雕什。
（3）覆蓋物：
a.簡(jiǎn)介
覆蓋物：所有疊加或覆蓋到地圖的內(nèi)容，我們統(tǒng)稱為地圖覆蓋物显晶。如標(biāo)注贷岸、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等磷雇。覆蓋物擁有自己的地理坐標(biāo)偿警，當(dāng)您拖動(dòng)或縮放地圖時(shí)，它們會(huì)相應(yīng)的移動(dòng)唯笙。
地圖API提供了如下幾種覆蓋物：
- Overlay：覆蓋物的抽象基類螟蒸，所有的覆蓋物均繼承此類的方法盒使。
- Marker：標(biāo)注表示地圖上的點(diǎn)，可自定義標(biāo)注的圖標(biāo)七嫌。
- Label：表示地圖上的文本標(biāo)注少办，您可以自定義標(biāo)注的文本內(nèi)容。
- Polyline：表示地圖上的折線诵原。
- Polygon：表示地圖上的多邊形英妓。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色绍赛。
- Circle:表示地圖上的圓鞋拟。
- InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息惹资。
- 標(biāo)注：標(biāo)注表示地圖上的點(diǎn)贺纲。API提供了默認(rèn)圖標(biāo)樣式
b.創(chuàng)建標(biāo)注
var map = new BMap.Map(“map");
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); //創(chuàng)建標(biāo)注
map.addOverlay(marker); //將標(biāo)注添加到地圖中
c.注冊(cè)事件
marker.addEventListener("click",function(){
alert("點(diǎn)擊事件");
});
d.可拖拽標(biāo)注
marker.enableDragging();
marker.addEventListener("dragend",function(e){
alert("當(dāng)前位置：" +e.point.lng + ", " + e.point.lat);
})
e.刪除標(biāo)注（刪除其他覆蓋物調(diào)用同樣的方法）
map.removeOverlay(marker);
f.信息窗口：
信息窗口在地圖上方的浮動(dòng)顯示HTML內(nèi)容。信息窗口可直接在地圖上的任意位置打開褪测，也可以在標(biāo)注對(duì)象上打開（此時(shí)信息窗口的坐標(biāo)與標(biāo)注的坐標(biāo)一致）猴誊。您可以使用InfoWindow來(lái)創(chuàng)建一個(gè)信息窗實(shí)例，注意同一時(shí)刻地圖上只能有一個(gè)信息窗口處于打開狀態(tài)
打開窗口：
var opts = {
width: 250, //信息窗口寬度
height:100, //信息窗口高度
title: "Hello" //信息窗口標(biāo)題
}
var infoWindow = new BMap.InfoWindow("<input type = 'button' value='按鈕'>", opts); //創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow, map.getCenter()); //打開信息窗口
g.隱藏與顯示
marker.hide(); // 隱藏覆蓋物
Marker.show(); // 顯示覆蓋
結(jié)語(yǔ)：
到這里關(guān)于HTML5的定位及地圖侮措，就介紹完畢了懈叹，希望大家能多多關(guān)注我，以后會(huì)慢慢為大家推出更好的其他web前端知識(shí)分扎。
