1????Geolocation簡(jiǎn)介
????????HTML5 Geolocation（地理定位）用于定位用戶(hù)的位置邀层。
1.1??定位用戶(hù)的位置
????????HTML5 Geolocation API 用于獲得用戶(hù)的地理位置癣猾。
????????鑒于該特性可能侵犯用戶(hù)的隱私脚线，除非用戶(hù)同意濒生，否則用戶(hù)位置信息是不可用的冕屯。
1.2??瀏覽器支持
????????Internet Explorer 9磺送、Firefox必尼、Chrome、Safari 以及 Opera 支持地理定位抒倚。
? ??????注釋?zhuān)?/b>對(duì)于擁有 GPS 的設(shè)備褐着，比如 iPhone，地理定位更加精確托呕。
2????接口API
2.1??獲取地理位置方法getCurrentPosition()
????????請(qǐng)使用 getCurrentPosition() 方法來(lái)獲得用戶(hù)的位置含蓉。
????????下例是一個(gè)簡(jiǎn)單的地理定位實(shí)例，可返回用戶(hù)位置的經(jīng)度和緯度项郊。
實(shí)例
<script>
? var x=document.getElementById("demo");
? function getLocation()?? {??
????if (navigator.geolocation) {????
? ????navigator.geolocation.getCurrentPosition(showPosition);????
????}??
????else{
? ????x.innerHTML="Geolocation is not supported by this browser.";
????}??
? }
? function showPosition(position)??
? {
????????x.innerHTML="Latitude: " +position.coords.latitude +?? "<br/>Longitude: " + position.coords.longitude;??
? }
</script>
例子解釋?zhuān)?/p>
·?????檢測(cè)是否支持地理定位
·?????如果支持馅扣，則運(yùn)行 getCurrentPosition() 方法。如果不支持着降，則向用戶(hù)顯示一段消息差油。
·?????如果getCurrentPosition()運(yùn)行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個(gè)coordinates對(duì)象
·?????showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度
上面的例子是一個(gè)非橙味矗基礎(chǔ)的地理定位腳本蓄喇，不含錯(cuò)誤處理。
2.2??getCurrentPosition()處理錯(cuò)誤和拒絕
????????getCurrentPosition() 方法的第二個(gè)參數(shù)用于處理錯(cuò)誤交掏。它規(guī)定當(dāng)獲取用戶(hù)位置失敗時(shí)運(yùn)行的函數(shù)：
實(shí)例
function showError(error)??
{??
? switch(error.code)????
? {????
? ? case error.PERMISSION_DENIED:??????
? ? ? ? x.innerHTML="User denied the request for Geolocation."??????
? ? ? ? break;????
????case error.POSITION_UNAVAILABLE:??????
? ? ? ? x.innerHTML="Locationinformation is unavailable."??????
? ? ? ? break;????
????case error.TIMEOUT:??????
? ? ? ? x.innerHTML="Therequest to get user location timed out."??????
? ? ? ? break;????
????case error.UNKNOWN_ERROR:??????
? ? ? ? x.innerHTML="Anunknown error occurred."??????
? ? ? ? break;????
? }??
}
錯(cuò)誤代碼：
·?????Permission denied - 用戶(hù)不允許地理定位
·?????Position unavailable - 無(wú)法獲取當(dāng)前位置
·?????Timeout - 操作超時(shí)
2.3??在地圖中顯示結(jié)果
????????如需在地圖中顯示結(jié)果妆偏，您需要訪問(wèn)可使用經(jīng)緯度的地圖服務(wù)，比如谷歌地圖或百度地圖：
實(shí)例
function showPosition(position)
{
? var latlon=position.coords.latitude+","+position.coords.longitude;?
? var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";?
? document.getElementById("mapholder").innerHTML="<imgsrc='"+img_url+"' />";
}
????????在上例中盅弛，我們使用返回的經(jīng)緯度數(shù)據(jù)在谷歌地圖中顯示位置（使用靜態(tài)圖像）钱骂。
????????上面的鏈接向您演示如何使用腳本來(lái)顯示帶有標(biāo)記叔锐、縮放和拖曳選項(xiàng)的交互式地圖。
2.4??給定位置的信息
????????本頁(yè)演示的是如何在地圖上顯示用戶(hù)的位置见秽。不過(guò)愉烙，地理定位對(duì)于給定位置的信息同樣很有用處。
案例：
·?????更新本地信息
·?????顯示用戶(hù)周?chē)呐d趣點(diǎn)
·?????交互式車(chē)載導(dǎo)航系統(tǒng) (GPS)
? ??getCurrentPosition() 方法 - 返回?cái)?shù)據(jù)
????????若成功解取，則 getCurrentPosition() 方法返回對(duì)象步责。始終會(huì)返回latitude、longitude 以及 accuracy 屬性肮蛹。如果可用勺择，則會(huì)返回其他下面的屬性。
2.5??watchPosition()方法
????watchPosition() - 返回用戶(hù)的當(dāng)前位置伦忠，并繼續(xù)返回用戶(hù)移動(dòng)時(shí)的更新位置（就像汽車(chē)上的 GPS）省核。
????clearWatch() - 停止 watchPosition() 方法
????????下面的例子展示 watchPosition() 方法。您需要一臺(tái)精確的 GPS 設(shè)備來(lái)測(cè)試該例（比如iPhone）：
實(shí)例
<script>
? var x=document.getElementById("demo");
? function getLocation()??
? {??
????if (navigator.geolocation)???? ??
????{
? ? ? ? navigator.geolocation.watchPosition(showPosition);????
????}??
????else
????{
? ????????x.innerHTML="Geolocation is not supported by this browser.";
????}
? }
? function showPosition(position)??
? {??
????????x.innerHTML="Latitude: " +position.coords.latitude +?? "<br/>Longitude: " + position.coords.longitude;??
? }
</script>
2.6??clearWatch()方法
3????基于百度地圖API
3.1??使用步驟
3.1.1????引用百度地圖API文件
????????引用百度地圖API文件 使用移動(dòng)瀏覽器版JSAPI需要引用如下文件：
<scriptsrc="http://api.map.baidu.com/api?type=quick&ak=您的密鑰&v=1.0"type="text/javascript"></script>?
申請(qǐng)ak請(qǐng)?jiān)L問(wèn)如下頁(yè)面：http://lbsyun.baidu.com/apiconsole/key昆码。
3.1.2????創(chuàng)建地圖實(shí)例
var map = newBMap.Map("l-map");??
? ????????位于BMap命名空間下的Map類(lèi)表示地圖气忠，通過(guò)new操作符可以創(chuàng)建一個(gè)地圖實(shí)例。其參數(shù)可以是元素id也可以是元素對(duì)象赋咽。????
????????注意在調(diào)用此構(gòu)造函數(shù)時(shí)應(yīng)確保容器元素已經(jīng)添加到地圖上旧噪。
3.1.3????創(chuàng)建點(diǎn)坐標(biāo)
var point = newBMap.Point(116.404, 39.915);??
????????這里我們使用BMap命名空間下的Point類(lèi)來(lái)創(chuàng)建一個(gè)坐標(biāo)點(diǎn)。Point類(lèi)描述了一個(gè)地理坐標(biāo)點(diǎn)脓匿，其中116.404表示經(jīng)度淘钟，39.915表示緯度。
地圖初始化?
map.centerAndZoom(point, 14);?
????????在創(chuàng)建地圖實(shí)例后陪毡，我們需要對(duì)其進(jìn)行初始化米母，BMap.Map.centerAndZoom()方法要求設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。 地圖必須經(jīng)過(guò)初始化才可以執(zhí)行其他操作毡琉。
3.1.4????地圖縮放與移動(dòng)
????????地圖被實(shí)例化并完成初始化以后铁瞒，就可以對(duì)地圖進(jìn)行進(jìn)行各種操作，如縮放桅滋、拖拽慧耍。
1.移動(dòng)地圖方法
map.enableDragging();?
????????以上方法默認(rèn)開(kāi)啟，即無(wú)論設(shè)置還是不設(shè)置該方法丐谋，均可用手指拖動(dòng)地圖實(shí)現(xiàn)地圖的移動(dòng)芍碧。 除以上方法外，以下兩個(gè)方法也可以通過(guò)改變地圖中心點(diǎn)實(shí)現(xiàn)地圖的移動(dòng)号俐。
map.setCenter(new BMap.Point(116.409, 39.918));????
map.panTo(new BMap.Point(116.409, 39.918));
2.縮放地圖方法
map.addControl(new BMap. ZoomControl ());
????????您除了可以在地圖上雙指縮放地圖外师枣，還可以通過(guò)添加縮放控件、操作縮放控件實(shí)現(xiàn)地圖的縮放萧落。
3.1.5???? 地圖的運(yùn)行和調(diào)試
????????如上代碼保存時(shí)践美，選擇utf-8的編碼方式且后綴名存為html，之后將html頁(yè)面放置到apache等網(wǎng)絡(luò)服務(wù)器上找岖，通過(guò)手機(jī)瀏覽器訪問(wèn)相應(yīng)地址即可顯示如下地圖：
????????如果要調(diào)試代碼陨倡，可以在PC端模擬移動(dòng)端瀏覽器進(jìn)行。以下以chrome瀏覽器為例說(shuō)明PC端設(shè)置方式：
????1. chrome瀏覽器下F12快捷鍵彈出如下調(diào)試工具：
????2. 點(diǎn)擊如上圖右下角紅框內(nèi)的設(shè)置圖標(biāo)许布，彈出設(shè)置面板：
????????第一個(gè)紅框用于設(shè)置PC端模擬的手機(jī)型號(hào)兴革，如iOS4或者Android；第二個(gè)紅框選擇后蜜唾，可以用鼠標(biāo)模擬手指拖拽地圖杂曲。
3.1.6????百度示例代碼
<!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,#l-map
? ? ? {
????????width:100%;height: 100%;overflow: hidden;hidden;margin:0;
? ? ? }?
????</style>?
????<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=您的密鑰&v=1.0">????</script>?
????<title>顯示地圖</title>?
? </head>?
? <body>?
??????????? <div id="l-map"></div>?
? </body>
</html>?
<script type="text/javascript">?
? var map = newBMap.Map("l-map");?
? map.centerAndZoom(newBMap.Point(116.404, 39.915), 14);?
</script>
3.2??高級(jí)API
Class:極速版JS總類(lèi)/極速版核心類(lèi)
3.2.1????縮放、比例尺控件
3.2.1.1?添加袁余、刪除控件
????????地圖上的控件包括：縮放控件擎勘、比例尺控件和自定義控件。您可以通過(guò)addControl颖榜、removeControl方法添加棚饵、刪除地圖控件。
????1. 可以同時(shí)在地圖上添加縮放控件和比例尺控件掩完。
var map = newBMap.Map("l-map");??
map.centerAndZoom(newBMap.Point(116.404, 39.915), 14);??????
var zoomControl=new BMap.ZoomControl();??
map.addControl(zoomControl);//添加縮放控件??
var scaleControl=new BMap.ScaleControl();??
map.addControl(scaleControl);//添加比例尺控件??
????2. 刪除控件方法如下：
map.removeControl(zoomControl);//刪除縮放控件??
map.removeControl(scaleControl);? //刪除比例尺控件
3.2.1.2?控制控件位置
????????初始化控件時(shí)噪漾，可提供一個(gè)可選參數(shù)，其中的anchor和offset屬性共同控制控件在地圖上的位置且蓬。
????????控件托琅穑靠位置：
????????anchor表示控件的停靠位置恶阴，即控件驼┦ぃ靠在地圖的哪個(gè)角。當(dāng)?shù)貓D尺寸發(fā)生變化時(shí)存淫，控件會(huì)根據(jù)驮耪叮靠位置的不同來(lái)調(diào)整自己的位置。
????????anchor允許的值為：
????BMAP_ANCHOR_TOP_LEFT 表示控件定位于地圖的左上角桅咆。
????BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地圖的右上角括授。
????BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地圖的左下角。
????BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地圖的右下角岩饼。
3.2.1.3?控件位置偏移
????????除了指定图孕椋靠位置外，還可以通過(guò)偏移量來(lái)指示控件距離地圖邊界有多少像素籍茧。如果兩個(gè)控件的桶媸觯靠位置相同，那么控件可能會(huì)重疊在一起寞冯，這時(shí)就可以通過(guò)偏移值使二者分開(kāi)顯示渴析。本示例將比例尺放置在地圖的左下角晚伙，由于API默認(rèn)會(huì)有版權(quán)信息，因此需要添加一些偏移值以防止控件重疊俭茧。
var opts ={offset: new BMap.Size(70, 5)}??????
map.addControl(newBMap.ScaleControl(opts));?
3.2.1.4?自定義控件
????????百度地圖API允許您通過(guò)繼承Control來(lái)創(chuàng)建自定義地圖控件咆疗。要?jiǎng)?chuàng)建可用的自定義控件，您需要做以下工作：
????????定義一個(gè)自定義控件的構(gòu)造函數(shù)母债。?設(shè)置自定義控件構(gòu)造函數(shù)的prototype屬性為Control的實(shí)例午磁，以便繼承控件基類(lèi)。?實(shí)現(xiàn)initialize()方法并提供defaultAnchor和defaultOffset屬性毡们。
3.2.1.4.1 定義構(gòu)造函數(shù)并繼承Control
????????首先您需要定義自定義控件的構(gòu)造函數(shù)迅皇，并在構(gòu)造函數(shù)中提供defaultAnchor和defaultOffset兩個(gè)屬性，以便API正確定位控件位置衙熔，接著讓其繼承于Control登颓。在下面的示例中我們定義一個(gè)名為ZoomControl的控件，每一次點(diǎn)擊將地圖放大兩個(gè)級(jí)別青责。它具有文本標(biāo)識(shí)挺据，而不是平移縮放控件中使用的圖形圖標(biāo)。
// 定義一個(gè)控件類(lèi)脖隶，即function??????
function ZoomControl(){?????????? ??// 設(shè)置默認(rèn)捅饽停靠位置和偏移量????????
??this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;??????????
??this.defaultOffset = new BMap.Size(10, 10);??????
}??????
// 通過(guò)JavaScript的prototype屬性繼承于BMap.Control?????
ZoomControl.prototype = new BMap.Control();????
3.2.1.4.2 初始化自定義控件
????????當(dāng)調(diào)用map.addControl()方法添加自定義控件時(shí)，API會(huì)調(diào)用該對(duì)象的initialize()方法用來(lái)初始化控件产阱，您需要實(shí)現(xiàn)此方法并在其中創(chuàng)建控件所需的DOM元素婉称，并添加DOM事件。所有自定義控件中的DOM元素最終都應(yīng)該添加到地圖容器（即地圖所在的DOM元素）中去构蹬，地圖容器可以通過(guò)map.getContainer()方法獲得王暗。最后initialize()方法需要返回控件容器的DOM元素。
// 自定義控件必須實(shí)現(xiàn)initialize方法庄敛，并且將控件的DOM元素返回?????
// 在本方法中創(chuàng)建個(gè)div元素作為控件的容器俗壹，并將其添加到地圖容器中?????
ZoomControl.prototype.initialize = function(map)
{?????? ??//創(chuàng)建一個(gè)DOM元素?????
??var div = document.createElement("div");?????? ??// 添加文字說(shuō)明??????
??div.appendChild(document.createTextNode("放大2級(jí)"));??????? ??// 設(shè)置樣式??????
??div.style.cursor = "pointer";??????
??div.style.border = "1px solid gray";??????
??div.style.backgroundColor = "white";??????
??// 綁定事件，點(diǎn)擊一次放大兩級(jí)??????
??div.onclick = function(e){???????????? ????map.setZoom(map.getZoom() + 2);??????
??}??????
??// 添加DOM元素到地圖中?????
??map.getContainer().appendChild(div);???????
??return div;????
}??
添加自定義控件?
添加自定義控件與添加其他控件方法一致藻烤，調(diào)用map.addControl()方法即可绷雏。
// 創(chuàng)建控件實(shí)例??????
var myZoomCtrl = new ZoomControl();??????
// 添加到地圖當(dāng)中??????
map.addControl(myZoomCtrl);
3.2.2????地圖覆蓋物
3.2.2.1?地圖覆蓋物概述
????????所有疊加或覆蓋到地圖的內(nèi)容，我們統(tǒng)稱(chēng)為地圖覆蓋物怖亭。如標(biāo)注涎显、折線、信息窗口等兴猩。覆蓋物擁有自己的地理坐標(biāo)期吓，當(dāng)您拖動(dòng)或縮放地圖時(shí)，它們會(huì)相應(yīng)的移動(dòng)倾芝。地圖API提供了如下幾種覆蓋物：
????Overlay：覆蓋物的抽象基類(lèi)讨勤，所有的覆蓋物均繼承此類(lèi)的方法箭跳。
????Marker：標(biāo)注表示地圖上的點(diǎn)，可自定義標(biāo)注的圖標(biāo)悬襟。
????Polyline：表示地圖上的折線衅码。
????InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息脊岳。注意：同一時(shí)刻只能有一個(gè)信息窗口在地圖上打開(kāi)。
????????可以使用map.addOverlay方法向地圖添加覆蓋物垛玻，使用map.removeOverlay 方法移除覆蓋物割捅，注意此方法不適用于InfoWindow。
3.2.2.2?標(biāo)注
????????標(biāo)注表示地圖上的點(diǎn)帚桩。API提供了默認(rèn)圖標(biāo)樣式亿驾，您也可以通過(guò)Icon類(lèi)來(lái)指定自定義圖標(biāo)。Marker的構(gòu)造函數(shù)的參數(shù)為Point和MarkerOptions（可選）账嚎。注意：當(dāng)您使用自定義圖標(biāo)時(shí)莫瞬，標(biāo)注的地理坐標(biāo)點(diǎn)將位于標(biāo)注所用圖標(biāo)的中心位置，您可通過(guò)Icon的offset屬性修改標(biāo)定位置郭蕉。
????????下面的示例向地圖中心點(diǎn)添加了一個(gè)標(biāo)注疼邀，并使用默認(rèn)的標(biāo)注樣式。
var map = new BMap.Map("l-map");?? map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);??
// 創(chuàng)建標(biāo)注
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));????
map.addOverlay(marker);
3.2.2.2.1 定義標(biāo)注圖標(biāo)
????????通過(guò)Icon類(lèi)可實(shí)現(xiàn)自定義標(biāo)注的圖標(biāo)召锈，下面示例通過(guò)參數(shù)MarkerOptions的icon屬性進(jìn)行設(shè)置旁振，您也可以使用marker.setIcon()方法。
var map = new BMap.Map("container");?????? var point = new BMap.Point(116.404, 39.915);??????
map.centerAndZoom(point, 15);? // 編寫(xiě)自定義函數(shù)涨岁，創(chuàng)建標(biāo)注???? ?
function addMarker(point, index)
{? ??// 創(chuàng)建圖標(biāo)對(duì)象???? ???
??var myIcon = new BMap.Icon("http://api.map.baidu.com/mapCard/img/location.gif",??????new BMap.Size(14, 23), {????????????? // 指定定位位置拐袜。???? ????????
// 當(dāng)標(biāo)注顯示在地圖上時(shí)，其所指向的地理位置距離圖標(biāo)左上????? ????????
// 角各偏移7像素和25像素梢薪。您可以看到在本例中該位置即是???? ????????
// 圖標(biāo)中央下端的尖角位置蹬铺。????? ????????
anchor: new BMap.Size(7, 25),??????????????
??});?????????
??// 創(chuàng)建標(biāo)注對(duì)象并添加到地圖???? ???
??var marker = new BMap.Marker(point, {icon: myIcon});???????? ??map.addOverlay(marker);???????
}???????
// 隨機(jī)向地圖添加10個(gè)標(biāo)注????? ??
var bounds = map.getBounds();???????
var lngSpan = bounds.getNorthEast().lng - bounds.getSouthWest().lng;???????
var latSpan = bounds.getNorthEast().lat- bounds.getSouthWest().lat;
for (var i = 0; i < 10; i++)
{??????? ??var point = new BMap.Point(bounds.getSouthWest().lng + lngSpan * (Math.random() * 0.7 + 0.15), bounds.getSouthWest().lat + latSpan * (Math.random() * 0.7 + 0.15));???????
??addMarker(point, i);??
}
監(jiān)聽(tīng)標(biāo)注事件?
????????事件方法與Map事件機(jī)制相同”玻可參考事件部分甜攀。
marker.addEventListener("click", function()? {???????? ????alert("您點(diǎn)擊了標(biāo)注");?????? ??});
3.2.2.3?信息窗口
????????信息窗口在地圖上方的浮動(dòng)顯示HTML內(nèi)容。信息窗口可直接在地圖上的任意位置打開(kāi)畜疾，也可以在標(biāo)注對(duì)象上打開(kāi)（此時(shí)信息窗口的坐標(biāo)與標(biāo)注的坐標(biāo)一致）赴邻。您可以使用InfoWindow來(lái)創(chuàng)建一個(gè)信息窗實(shí)例，注意同一時(shí)刻地圖上只能有一個(gè)信息窗口處于打開(kāi)狀態(tài)啡捶。
var opts = {?????????? ??width : 100,???? // 信息窗口寬度????? ?????
??height: 50,???? // 信息窗口高度????? ?????
??title : "Hello"? // 信息窗口標(biāo)題???? ?
}
// 創(chuàng)建信息窗口對(duì)象??????
var infoWindow = new BMap.InfoWindow("World", opts);? ???????// 打開(kāi)信息窗口
map.openInfoWindow(infoWindow, marker.getPosition());?????
3.2.2.4?折線
????????Polyline表示地圖上的折線覆蓋物姥敛。它包含一組點(diǎn)，并將這些點(diǎn)連接起來(lái)形成折線瞎暑。
添加折線?
????????折線在地圖上繪制為一系列直線段彤敛∮敕可以自定義這些線段的顏色、粗細(xì)和透明度墨榄。顏色可以是十六進(jìn)制數(shù)字形式（比如：#ff0000）或者是顏色關(guān)鍵字（比如：red）玄糟。 以下代碼段會(huì)在兩點(diǎn)之間創(chuàng)建6像素寬的藍(lán)色折線：
var polyline = new BMap.Polyline([new BMap.Point(116.399, 39.910),???????????????????????????????????????? new BMap.Point(116.405, 39.920)],?????????????????????????????????????? {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});?????? map.addOverlay(polyline);
3.2.2.5?自定義覆蓋物
????????要?jiǎng)?chuàng)建自定義覆蓋物，您需要做以下工作：
????1袄秩、 定義一個(gè)自定義覆蓋物的構(gòu)造函數(shù)阵翎，通過(guò)構(gòu)造函數(shù)參數(shù)可以傳遞一些自由的變量。
????2之剧、 設(shè)置自定義覆蓋物對(duì)象的prototype屬性為Overlay的實(shí)例郭卫，以便繼承覆蓋物基類(lèi)。
????3背稼、 實(shí)現(xiàn)initialize方法贰军，當(dāng)調(diào)用map.addOverlay方法時(shí)，API會(huì)調(diào)用此方法蟹肘。
????4词疼、 實(shí)現(xiàn)draw方法。
3.2.2.5.1 定義構(gòu)造函數(shù)并繼承Overlay
????????首先您需要定義自定義覆蓋物的構(gòu)造函數(shù)帘腹，在下面的示例中我們定義一個(gè)名為SquareOverlay的構(gòu)造函數(shù)贰盗，它包含中心點(diǎn)和邊長(zhǎng)兩個(gè)參數(shù)，用來(lái)在地圖上創(chuàng)建一個(gè)方形覆蓋物竹椒。
// 定義自定義覆蓋物的構(gòu)造函數(shù)??? ???
function SquareOverlay(center, length, color)
{?????????? ??this._center = center;??????????
??this._length = length;??????????
??this._color = color;????????
}??????
// 繼承API的BMap.Overlay????? ???
SquareOverlay.prototype = new BMap.Overlay();
3.2.2.5.2 初始化自定義覆蓋物
????????當(dāng)調(diào)用map.addOverlay方法添加自定義覆蓋物時(shí)童太，API會(huì)調(diào)用該對(duì)象的initialize方法用來(lái)初始化覆蓋物，在初始化過(guò)程中需要?jiǎng)?chuàng)建覆蓋物所需要的DOM元素胸完，并添加到地圖相應(yīng)的容器中书释。地圖提供了若干容器供覆蓋物展示，通過(guò)map.getPanes方法可以得到這些容器元素赊窥，它們包括：
??????floatPane爆惧。
??????markerMouseTarget
??????floatShadow
??????markerPane
??????mapPane
????????這些對(duì)象代表了不同的覆蓋物容器元素，它們之間存在著覆蓋關(guān)系锨能，最上一層為floatPane扯再，用于顯示信息窗口內(nèi)容，下面依次為標(biāo)注點(diǎn)擊區(qū)域?qū)又酚觥⑿畔⒋翱陉幱皩酉ㄗ琛⑽谋緲?biāo)注層、標(biāo)注層和矢量圖形層倔约。 我們自定義的方形覆蓋物可以添加到任意圖層上秃殉，這里我們選擇添加到markerPane上，作為其一個(gè)子結(jié)點(diǎn)。
// 實(shí)現(xiàn)初始化方法??? ?
SquareOverlay.prototype.initialize = function(map)
{?????? ??// 保存map對(duì)象實(shí)例???? ?????
??this._map = map;??????????
??// 創(chuàng)建div元素钾军，作為自定義覆蓋物的容器???? ?????
??var div = document.createElement("div");?????????? ??div.style.position = "absolute";??????????
??// 可以根據(jù)參數(shù)設(shè)置元素外觀???? ?????
??div.style.width = this._length + "px";
??div.style.height = this._length + "px";
??div.style.background = this._color;
? // 將div添加到覆蓋物容器中???? ?????
??map.getPanes().markerPane.appendChild(div);
??// 保存div實(shí)例???? ?????
??this._div = div;????????
??// 需要將div元素作為方法的返回值鳄袍，當(dāng)調(diào)用該覆蓋物的show、???? ?
??// hide方法吏恭，或者對(duì)覆蓋物進(jìn)行移除時(shí)拗小，API都將操作此元素。???? ?????
??return div;??????
}
3.2.2.5.3 繪制覆蓋物
????????到目前為止樱哼，我們僅僅把覆蓋物添加到了地圖上哀九，但是并沒(méi)有將它放置在正確的位置上。您需要在draw方法中設(shè)置覆蓋物的位置搅幅，每當(dāng)?shù)貓D狀態(tài)發(fā)生變化（比如：位置移動(dòng)勾栗、級(jí)別變化）時(shí)，API都會(huì)調(diào)用覆蓋物的draw方法盏筐，用于重新計(jì)算覆蓋物的位置。通過(guò)map.pointToOverlayPixel方法可以將地理坐標(biāo)轉(zhuǎn)換到覆蓋物的所需要的像素坐標(biāo)砸讳。
// 實(shí)現(xiàn)繪制方法???? ?
SquareOverlay.prototype.draw = function()
{?????? ??// 根據(jù)地理坐標(biāo)轉(zhuǎn)換為像素坐標(biāo)琢融，并設(shè)置給容器????? ????
??var position = this._map.pointToOverlayPixel(this._center);????
??this._div.style.left = position.x - this._length / 2 + "px";????
??this._div.style.top = position.y - this._length / 2 + "px";??????
}
3.2.2.5.4 移除覆蓋物
????????當(dāng)調(diào)用map.removeOverlay或者map.clearOverlays方法時(shí)，API會(huì)自動(dòng)將initialize方法返回的DOM元素進(jìn)行移除簿寂。
3.2.2.5.5 顯示和隱藏覆蓋物
????????自定義覆蓋物會(huì)自動(dòng)繼承Overlay的show和hide方法漾抬，方法會(huì)修改由initialize方法返回的DOM元素的style.display屬性。如果自定義覆蓋物元素較為復(fù)雜常遂，您也可以自己實(shí)現(xiàn)show和hide方法纳令。
// 實(shí)現(xiàn)顯示方法????? ?
SquareOverlay.prototype.show = function()
{ ????????????if (this._div)
? {?????????????? ????this._div.style.display = "";??????????
??}??????
}????????
// 實(shí)現(xiàn)隱藏方法??? ?
SquareOverlay.prototype.hide = function()
{?????????? ??if (this._div)
? {?????????????? ????this._div.style.display = "none";??????????
??}??????
}
3.2.2.5.6 自定義其他方法
????????通過(guò)構(gòu)造函數(shù)的prototype屬性，您可以添加任何自定義的方法克胳，比如下面這個(gè)方法每調(diào)用一次就能改變覆蓋物的顯示狀態(tài)：
// 添加自定義方法???? ?
SquareOverlay.prototype.toggle = function()
{?????????? ??if (this._div)
? {????????????? ????if (this._div.style.display == "")
????{????????????????? ??????this.hide();??????????????
????}?????????????
????else {????????????????? ??????this.show();??????????????
????}?????????
??}??????
}
3.2.2.5.7 添加覆蓋物
? ? ? 您現(xiàn)在已經(jīng)完成了一個(gè)完整的自定義覆蓋物的編寫(xiě)平绩，可以添加到地圖上了。
// 添加自定義覆蓋物???? ??
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");?
map.addOverlay(mySquare);
3.2.3????地圖事件
3.2.3.1?地圖事件概述
????????瀏覽器中的JavaScript是“事件驅(qū)動(dòng)的”漠另，這表示JavaScript通過(guò)生成事件來(lái)響應(yīng)交互捏雌，并期望程序能夠“監(jiān)聽(tīng)”感興趣的活動(dòng)。例如笆搓，在瀏覽器中性湿，用戶(hù)的鼠標(biāo)和鍵盤(pán)交互可以創(chuàng)建在DOM內(nèi)傳播的事件。對(duì)某些事件感興趣的程序會(huì)為這些事件注冊(cè)JavaScript事件監(jiān)聽(tīng)器满败，并在接收這些事件時(shí)執(zhí)行代碼肤频。
????????百度地圖API擁有一個(gè)自己的事件模型，程序員可監(jiān)聽(tīng)地圖API對(duì)象的自定義事件算墨，使用方法和DOM事件類(lèi)似宵荒。但請(qǐng)注意，地圖API事件是獨(dú)立的，與標(biāo)準(zhǔn)DOM事件不同骇扇。
3.2.3.2?事件監(jiān)聽(tīng)
????????百度地圖API中的大部分對(duì)象都含有addEventListener方法摔竿，您可以通過(guò)該方法來(lái)監(jiān)聽(tīng)對(duì)象事件。例如少孝，BMap.Map包含click继低、dblclick等事件。在特定環(huán)境下這些事件會(huì)被觸發(fā)稍走，同時(shí)監(jiān)聽(tīng)函數(shù)會(huì)得到相應(yīng)的事件參數(shù)e袁翁，比如當(dāng)用戶(hù)點(diǎn)擊地圖時(shí)，e參數(shù)會(huì)包含點(diǎn)擊點(diǎn)的地理位置point婿脸。
????????有關(guān)地圖API對(duì)象的事件粱胜，請(qǐng)參考完整的API參考文檔。
????????addEventListener方法有兩個(gè)參數(shù)：監(jiān)聽(tīng)的事件名稱(chēng)和事件觸發(fā)時(shí)調(diào)用的函數(shù)狐树。在下面示例中焙压，每當(dāng)用戶(hù)點(diǎn)擊地圖時(shí)，會(huì)彈出一個(gè)警告框抑钟。
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
map.addEventListener("click", function(){????????????? ??alert("您點(diǎn)擊了地圖涯曲。");?????? });
????????通過(guò)監(jiān)聽(tīng)事件還可以捕獲事件觸發(fā)后的狀態(tài)。下面示例顯示用戶(hù)拖動(dòng)地圖后地圖中心的經(jīng)緯度信息在塔。
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
map.addEventListener("moveend", function(){????????????? ??var center = map.getCenter();????????????
??alert("地圖中心點(diǎn)變更為：" + center.lng + ", " + center.lat);?????? });
3.2.3.3?事件參數(shù)和this
????????在標(biāo)準(zhǔn)的DOM事件模型中（DOMLevel 2 Events）幻件，監(jiān)聽(tīng)函數(shù)會(huì)得到一個(gè)事件對(duì)象e，在e中可以獲取有關(guān)該事件的信息蛔溃。同時(shí)在監(jiān)聽(tīng)函數(shù)中this會(huì)指向觸發(fā)該事件的DOM元素绰沥。 百度地圖API的事件模型與此類(lèi)似，在事件監(jiān)聽(tīng)函數(shù)中傳遞事件對(duì)象e贺待，每個(gè)e參數(shù)至少包含事件類(lèi)型（type）和觸發(fā)該事件的對(duì)象（target）徽曲。 API還保證函數(shù)內(nèi)的this指向觸發(fā)（同時(shí)也是綁定）事件的API對(duì)象。
????????例如狠持，通過(guò)參數(shù)e得到點(diǎn)擊的經(jīng)緯度坐標(biāo)疟位。
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
map.addEventListener("click", function(e){????????????? ??alert(e.point.lng + ", " + e.point.lat);??????
});
????????或者通過(guò)this得到地圖縮放后的級(jí)別。
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
map.addEventListener("zoomend", function(){????????????? ??alert("地圖縮放至：" + this.getZoom() + "級(jí)");?????? });
3.2.3.4?移除監(jiān)聽(tīng)事件
????????當(dāng)您不再希望監(jiān)聽(tīng)事件時(shí)喘垂，可以將事件監(jiān)聽(tīng)進(jìn)行移除甜刻。每個(gè)API對(duì)象提供了removeEventListener用來(lái)移除事件監(jiān)聽(tīng)函數(shù)。
????????下面示例中正勒，用戶(hù)第一次點(diǎn)擊地圖會(huì)觸發(fā)事件監(jiān)聽(tīng)函數(shù)得院，在函數(shù)內(nèi)部對(duì)事件監(jiān)聽(tīng)進(jìn)行了移除，因此后續(xù)的點(diǎn)擊操作則不會(huì)觸發(fā)監(jiān)聽(tīng)函數(shù)章贞。
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
function showInfo(e){????????? ??alert(e.point.lng + ", " + e.point.lat);?????????
??map.removeEventListener("click", showInfo);?????? }??????
map.addEventListener("click", showInfo);3.2.4????地圖圖層
3.2.4.1?地圖圖層概念
????????地圖可以包含一個(gè)或多個(gè)圖層祥绞，每個(gè)圖層在每個(gè)級(jí)別都是由若干張圖塊組成的，它們覆蓋了地球的整個(gè)表面。例如您所看到包括街道蜕径、興趣點(diǎn)两踏、學(xué)校、公園等內(nèi)容的地圖展現(xiàn)就是一個(gè)圖層兜喻，另外交通流量的展現(xiàn)也是通過(guò)圖層來(lái)實(shí)現(xiàn)的梦染。
????????目前百度地圖提供的圖層包括：
??????TrafficLayer：交通流量圖層。
3.2.4.2?添加和移除圖層
????????通過(guò)map.addTileLayer方法可向地圖添加圖層朴皆，例如下面代碼將顯示北京市的交通流量帕识。
var map = new BMap.Map("l-map");???????? // 創(chuàng)建地圖實(shí)例????? ?var point = new BMap.Point(116.404, 39.915);? // 創(chuàng)建點(diǎn)坐標(biāo)???? ?
map.centerAndZoom(point, 15);? // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
var traffic = new BMap.TrafficLayer();? // 創(chuàng)建交通流量圖層實(shí)例????? ?
map.addTileLayer(traffic);??????? // 將圖層添加到地圖上
????????若要從地圖上移除圖層遂铡，需要調(diào)用map.removeTileLayer方法肮疗。
map.removeTileLayer(traffic);??????????????? // 將圖層移除
3.2.4.3?自定義圖層
3.2.4.3.1 地圖坐標(biāo)系
????????在使用自定義圖層前，您需要了解百度地圖的地圖坐標(biāo)系扒接，百度地圖坐標(biāo)系涉及：
??????經(jīng)緯度球面坐標(biāo)系統(tǒng)
??????墨卡托平面坐標(biāo)系統(tǒng)
??????圖塊編號(hào)系統(tǒng)
????????經(jīng)緯度是一種利用三維空間的球面來(lái)定義地球上的空間的球面坐標(biāo)系伪货，它能夠標(biāo)示地球上任何一個(gè)位置。通過(guò)倫敦格林尼治天文臺(tái)原址的經(jīng)線為0度經(jīng)線钾怔，從0度經(jīng)線向東超歌、向西各分180度。赤道為0度緯線蒂教，赤道以北的緯線稱(chēng)為北緯、以南的稱(chēng)為南緯脆荷。在百度地圖中凝垛，東經(jīng)和北緯用正數(shù)表示，西經(jīng)和南緯用負(fù)數(shù)表示蜓谋。例如北京的位置大約是北緯39.9度梦皮，東經(jīng)116.4度，那么用數(shù)值標(biāo)示就是經(jīng)度116.6桃焕，緯度39.9剑肯。 在百度地圖中，習(xí)慣經(jīng)度在前观堂，緯度在后让网，例如：
// 創(chuàng)建點(diǎn)坐標(biāo)港令，經(jīng)度在前骏掀，緯度在后
var point = new BMap.Point(116.404, 39.915);?
????????由于百度地圖是顯示在平面上的根欧，因此在地圖內(nèi)部系統(tǒng)中需要將球面坐標(biāo)轉(zhuǎn)換為平面坐標(biāo)隐轩，這個(gè)轉(zhuǎn)換過(guò)程稱(chēng)為投影炭臭。百度地圖使用的是墨卡托投影奶镶。墨卡托平面坐標(biāo)如下圖所示羹奉，平面坐標(biāo)與經(jīng)緯度坐標(biāo)系的原點(diǎn)是重合的鲫尊。
????????百度地圖在每一個(gè)級(jí)別將整個(gè)地圖劃分成若干個(gè)圖塊，通過(guò)編號(hào)系統(tǒng)將整個(gè)圖塊整合在一起以便顯示完整的地圖竞滓。當(dāng)?shù)貓D被拖動(dòng)或者級(jí)別發(fā)生變化時(shí)咐吼，地圖API將會(huì)根據(jù)平面坐標(biāo)計(jì)算出當(dāng)前視野內(nèi)所需顯示的圖塊的編號(hào)。百度地圖圖塊編號(hào)規(guī)則如下圖所示：
????????從平面坐標(biāo)原點(diǎn)開(kāi)始的右上方向的圖塊編號(hào)為0,0商佑，以此類(lèi)推锯茄。在最低的縮放級(jí)別（級(jí)別1）中，整個(gè)地球由 4 張圖塊組成莉御。隨著級(jí)別的增長(zhǎng)撇吞，地圖所使用的圖塊個(gè)數(shù)也隨之增多。
3.2.4.3.2 定義取圖規(guī)則
????????通過(guò)TileLayer類(lèi)開(kāi)發(fā)者可以實(shí)現(xiàn)自定義圖層礁叔。其中牍颈，TileLayer實(shí)例的getTilesUrl方法需要實(shí)現(xiàn)，用來(lái)告訴API取圖規(guī)則琅关。getTilesUrl方法的參數(shù)包括tileCoord和zoom煮岁，其中tileCoord為圖塊的編號(hào)信息，zoom為圖塊的級(jí)別涣易，每當(dāng)?shù)貓D需要顯示特定級(jí)別的特定位置的圖塊時(shí)就會(huì)自動(dòng)調(diào)用此方法画机，并提供這兩個(gè)參數(shù)。使用者需要告知API特定編號(hào)和級(jí)別所對(duì)應(yīng)的圖塊的地址新症，這樣API就能正常顯示自定義的圖層了步氏。
3.2.4.3.3 添加和移除自定義圖層
????????以下代碼在每個(gè)圖塊的所有縮放級(jí)別上顯示一個(gè)簡(jiǎn)單的透明疊加層，使用浮動(dòng)紅色小水滴表示圖塊的輪廓徒爹。
var map = new BMap.Map("l-map");????????? // 創(chuàng)建地圖實(shí)例???? ?var point = new BMap.Point(116.404, 39.915);? // 創(chuàng)建點(diǎn)坐標(biāo)???? ?
map.centerAndZoom(point,15); ?// 初始化地圖荚醒，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 ?
var tilelayer = new BMap.TileLayer();??? // 創(chuàng)建地圖層實(shí)例??? ?
tilelayer.getTilesUrl=function(){???????????? ??// 設(shè)置圖塊路徑???? ???????????
??return "layer.gif";??????
};??????
map.addTileLayer(tilelayer);??????? // 將圖層添加到地圖上
3.2.5????地圖服務(wù)
3.2.5.1?地圖服務(wù)概述
????地圖服務(wù)是指那些提供數(shù)據(jù)信息的接口，比如本地搜索隆嗅、路線規(guī)劃等等界阁。百度地圖API提供的服務(wù)有：
??????LocalSearch：本地搜索，提供某一特定地區(qū)的位置搜索服務(wù)胖喳，比如在北京市搜索“公園”泡躯。
??????Geocoder：地址解析，提供將地址信息轉(zhuǎn)換為坐標(biāo)點(diǎn)信息的服務(wù)丽焊。
??????routeSearch：線路規(guī)劃较剃、導(dǎo)航服務(wù)，調(diào)用該服務(wù)可跳轉(zhuǎn)到百度地圖webapp頁(yè)面進(jìn)行公交技健、駕車(chē)重付、步行、導(dǎo)航等操作凫乖。
????????搜索類(lèi)的服務(wù)接口需要指定一個(gè)搜索范圍确垫，否則接口將不能工作弓颈。
3.2.5.2?本地搜索
????????BMap.LocalSearch提供本地搜索服務(wù)，在使用本地搜索時(shí)需要為其設(shè)置一個(gè)檢索區(qū)域删掀，檢索區(qū)域可以是BMap.Map對(duì)象翔冀、BMap.Point對(duì)象或者是省市名稱(chēng)（比如："北京市"）的字符串。BMap.LocalSearch構(gòu)造函數(shù)的第二個(gè)參數(shù)是可選的披泪，您可以在其中指定結(jié)果的呈現(xiàn)纤子。BMap.RenderOptions類(lèi)提供了若干控制呈現(xiàn)的屬性，其中map指定了結(jié)果所展現(xiàn)的地圖實(shí)例款票，panel指定了結(jié)果列表的容器元素控硼。
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
var local = new BMap.LocalSearch(map, {???????????? ??renderOptions:{map: map}?????? });??????
local.search("天安門(mén)");????????另外，BMap.LocalSearch還提包含searchNearby和searchInBounds方法艾少，為您提供周邊搜索和范圍搜索服務(wù)卡乾。
3.2.5.2.1 配置搜索
????????BMap.LocalSearch提供了若干配置方法，通過(guò)它們可以自定義搜索服務(wù)的行為以滿(mǎn)足您的需求缚够。 在下面的示例中幔妨，我們調(diào)整每頁(yè)顯示8個(gè)結(jié)果，并且根據(jù)結(jié)果點(diǎn)位置自動(dòng)調(diào)整地圖視野谍椅，不顯示第一條結(jié)果的信息窗口：
var map = new BMap.Map("l-map");?? map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);??
var local = new BMap.LocalSearch("北京市",{renderOptions: {map: map,autoViewport: true},pageCapacity: 8});?????? local.search("中關(guān)村");3.2.5.2.2 結(jié)果面板
????????通過(guò)設(shè)置BMap.LocalSearchOptions.renderOptions.panel屬性误堡，可以為本地搜索對(duì)象提供一個(gè)結(jié)果列表容器，搜索結(jié)果會(huì)自動(dòng)添加到容器元素中雏吭。請(qǐng)看下面示例：
var map = new BMap.Map("l-map");?? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??
var local = new BMap.LocalSearch(map,{renderOptions: {map: map,panel: "results"}};?????? local.search("中關(guān)村");3.2.5.2.3 數(shù)據(jù)接口
????????除了搜索結(jié)果會(huì)自動(dòng)添加到地圖和列表外锁施，您還可以通過(guò)數(shù)據(jù)接口獲得詳細(xì)的數(shù)據(jù)信息，結(jié)合地圖API您可以自行向地圖添加標(biāo)注和信息窗口杖们。BMap.LocalSearch和BMap.LocalSearchOptions類(lèi)提供了若干設(shè)置回調(diào)函數(shù)的接口沾谜，通過(guò)它們可得到搜索結(jié)果的數(shù)據(jù)信息。例如胀莹，通過(guò)onSearchComplete回調(diào)函數(shù)參數(shù)可以獲得BMap.LocalResult對(duì)象實(shí)例，它包含了每一次搜索結(jié)果的數(shù)據(jù)信息婚温。 當(dāng)回調(diào)函數(shù)被執(zhí)行時(shí)描焰，您可以使用BMap.LocalSearch.getStatus()方法來(lái)確認(rèn)搜索是否成功或者得到錯(cuò)誤的詳細(xì)信息。
????????在下面這個(gè)示例中栅螟，通過(guò)onSearchComplete回調(diào)函數(shù)得到第一頁(yè)每條結(jié)果的標(biāo)題和地址信息荆秦，并輸出到頁(yè)面上：
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
var options = {???????????? ??onSearchComplete: function(results){???????????????? ????if (local.getStatus() == BMAP_STATUS_SUCCESS){?????????????????????? ???// 判斷狀態(tài)是否正確????? ???????????????????????var s = [];??????????????????????
??????for (var i = 0; i < results.getCurrentNumPois(); i ++)
? ????{?????????????????????????? ????????s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);??????????????????????
??????}???????????????????
??????document.getElementById("log").innerHTML = s.join("<br>"); ????}????????????
??}???????
};??????
var local = new BMap.LocalSearch(map, options);??????
local.search("公園");3.2.5.2.4 周邊搜索
????????通過(guò)周邊搜索服務(wù)，您可以在某個(gè)地點(diǎn)附近進(jìn)行搜索力图，也可以在某一個(gè)特定結(jié)果點(diǎn)周?chē)M(jìn)行搜索步绸。
????????下面示例展示如何在前門(mén)附近搜索小吃：
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
var local = new BMap.LocalSearch(map, { renderOptions:{map: map, autoViewport: true}});?????? local.searchNearby("小吃", "前門(mén)");3.2.5.2.5 矩形范圍搜索
????????矩形范圍搜索將根據(jù)您提供的視野范圍提供搜索結(jié)果。注意：當(dāng)搜索范圍過(guò)大時(shí)可能會(huì)出現(xiàn)無(wú)結(jié)果的情況吃媒。
????????下面示例展示在當(dāng)前地圖視野范圍內(nèi)搜索銀行：
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);?????
var local = new BMap.LocalSearch(map,{ renderOptions:{map: map}})瓤介；local.searchInBounds("銀行", map.getBounds());3.2.5.3?線路規(guī)劃吕喘、導(dǎo)航
????????BMap.RouteSearch類(lèi)提供線路規(guī)劃、導(dǎo)航服務(wù)刑桑。通過(guò)使用該類(lèi)的routeCall方法氯质，便可在手機(jī)瀏覽器端調(diào)起百度地圖webapp（http://map.baidu.com/mobile/webapp/index/index?），利用百度地圖webapp精準(zhǔn)的定位祠斧、html5導(dǎo)航及線路規(guī)劃功能實(shí)現(xiàn)“到這去”等功能闻察。
????????下面示例展示了如何使用駕車(chē)導(dǎo)航服務(wù)：
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);??????
var routeSearch=new BMap.RouteSearch();??
var start = {latlng:new BMap.Point(116.404, 39.915),name:"故宮"}；?? var end = {latlng:new BMap.Point(116.380825,39.915455), name:"肯德基（漢光店）" }琢锋；?? var opts = {mode:BMAP_MODE_DRIVING, //公交辕漂、駕車(chē)、導(dǎo)航均修改該參數(shù)? region:"北京"
}吴超；
var ss = new BMap.RouteSearch();??
routeSearch.routeCall(start,end,opts);
3.2.5.4?地理編碼
????????地理編碼能夠?qū)⒌刂沸畔⑥D(zhuǎn)換為地理坐標(biāo)點(diǎn)信息钉嘹。
3.2.5.4.1 根據(jù)地址描述獲得坐標(biāo)
????????百度地圖API提供Geocoder類(lèi)進(jìn)行地址解析，您可以通過(guò)Geocoder.getPoint()方法來(lái)將一段地址描述轉(zhuǎn)換為一個(gè)坐標(biāo)烛芬。在下面的示例中隧期，我們將獲得地址“北京市海淀區(qū)上地10街10號(hào)”的地理坐標(biāo)位置，并在這個(gè)位置上添加一個(gè)標(biāo)注赘娄。注意在調(diào)用Geocoder.getPoint()方法時(shí)您需要提供地址解析所在的城市（本例為“北京市”）仆潮。
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
// 創(chuàng)建地址解析器實(shí)例???? ?
var myGeo = new BMap.Geocoder();??????
// 將地址解析結(jié)果顯示在地圖上，并調(diào)整地圖視野??? ?
myGeo.getPoint("北京市海淀區(qū)上地10街10號(hào)", function(point){??????????? ?????if (point) {???? map.centerAndZoom(point, 16);????????????????????
???? map.addOverlay(new BMap.Marker(point));????????????????
?? }???????????
}, "北京市");
3.2.5.4.2 反向地理編碼
????????反向地理編碼的過(guò)程正好相反遣臼，它根據(jù)一個(gè)坐標(biāo)點(diǎn)得到一個(gè)地址的描述性置。您可以通過(guò)Geocoder.getLocation()方法獲得地址描述。當(dāng)解析工作完成后揍堰，您提供的回調(diào)函數(shù)將會(huì)被觸發(fā)鹏浅。如果解析成功，則回調(diào)函數(shù)的參數(shù)為GeocoderResult對(duì)象屏歹，否則為null隐砸。
var map = new BMap.Map("l-map");?????? map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);??????
// 創(chuàng)建地理編碼實(shí)例????? ?
var myGeo = new BMap.Geocoder();??????
// 根據(jù)坐標(biāo)得到地址描述??? ?
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result)? {??????????????????????? if (result){??????????????????????????? ?? alert(result.address);????????????????????????
}??????
?});
3.2.6????API示例
http://developer.baidu.com/map/jsdemo-mobile.htm#a1_1
3.3??網(wǎng)上示例
<!DOCTYPE HTML>
<html>
? <head>
????<meta charset="utf-8" />
? ? <title>無(wú)標(biāo)題文檔</title>
? ? <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
????<script type="text/javascript">
? ? ? ?function getLocation()
? ? ? ?{?
??????????if(navigator.geolocation){
? ? ? ? ? ? navigator.geolocation.getCurrentPosition(showMap,handleError, {enableHighAccuracy:true, maximumAge:1000});
??????????}else{
? ? ? ? ? ? alert("您的瀏覽器不支持使用HTML 5來(lái)獲取地理位置服務(wù)");
??????????}
? ? ? ?}
?
? ? ? ?function showMap(value)
? ? ? ?{
??????????var longitude = value.coords.longitude;
??????????var latitude = value.coords.latitude;
??????????var map = new BMap.Map("map");
??????????var point = new BMap.Point(longitude,latitude);????// 創(chuàng)建點(diǎn)坐標(biāo)
??????????map.centerAndZoom(point, 15);
??????????var marker = new BMap.Marker(new BMap.Point(longitude, latitude));??//創(chuàng)建標(biāo)注
??????????map.addOverlay(marker);??????????????//將標(biāo)注添加到地圖中
? ? ? ?}
?
? ? ? ?function handleError(value)
? ? ? ?{
??????????switch(value.code){
? ? ? ? ? ? case 1:
????????????????alert("位置服務(wù)被拒絕");
????????????????break;
? ? ? ? ? ? case 2:
????????????????alert("暫時(shí)獲取不到位置信息");
????????????????break;
? ? ? ? ? ? case 3:
????????????????alert("獲取信息超時(shí)");
????????????????break;
? ? ? ? ? ? case 4:
????????????????alert("未知錯(cuò)誤");
????????????????break;
? ? ? ? ? ? }
? ? ? ?}
?
? ? ? ?function init()
? ? ? ?{
??????????getLocation();
? ? ? ?}
?
? ? ? ?window.onload = init;
?
????</script>
? </head>
? <body>
?????<div id="map" style="width:600px;height:600px;"></div>
? </body>
</html>
4 參考連接
基于百度地圖的HTML5地理位置定位實(shí)例
http://blog.sina.com.cn/s/blog_68693f980100yy47.html
HTML5 地理定位
