天天看點

html5實作地圖上定位導航路線

轉自:http://zhidao.baidu.com/link?url=u_HYWgKERQvi6luDE3jdKcJM3ybb8bWkedrXne4ckR99b6riJ0mmKEAkwJ3a9Q8o38ieEqHtnvaqoclLtEdOO6_Vtb33LmtY8-uS-11q47i

 關于  導航路  的問題

比如我的一個普通的webapp網站,手機地圖上能自動定位我目前的位置,并能夠顯示出我目前位置離所在目标的具體路線,這樣用html5可以實作嗎,還是說一定要用ios開發才行      

分享到: 2014-08-27 13:59 提問者采納

HTML5+JQM即可實作

參考方法:
1.先去通過百度拾取坐标系統獲得點位的坐标
http://api.map.baidu.com/lbsapi/getpoint/index.html

2.在網頁的<head>中插入百度API引用腳本。
<script type="text/javascript" src="http://api.map.baidu.com/api?

key=&v=1.1&services=true"></script>

3.在網頁的</body>之後</html>之前插入地圖顯示代碼

4.設定顯示地圖的div的id為“dituContent”,即添加 id="dituContent" 
由于jqm的div的高度都是根據内容自由放大的,是以為了地圖能正常顯示,還需要

增加一個高度值,一般情況600px就可以

注意事項:

1. var point = new BMap.Point(120.524011,36.395728); 這是定義中心店坐标

2. map.centerAndZoom(point,15); 這個據我調試 應該是控制地圖比例縮放的

3. window.setTimeout(function(){map.panTo(point);}, 1000);注意了 一般的

demo是沒有這個東西滴,是以呢當跳轉到地圖的頁面時候 是不會顯示你定位的中心

點的  但是由于我的聰明和機智 各種裝孫子求助大神 才得知了這個大神不削一顧

的屬性 :設定地圖加載後1秒調至中心點 。。最後強調下   

低調 一定要低調。。。

4. function createIcon(json){
        var icon = new BMap.Icon("images/map_icon.png", new BMap.Size

(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-

json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size

(json.x,json.h)})
        return icon;
    }  這裡就是建立一個icon

5. var markerArr = [{title:"西程村",content:"青島市即墨市藍鳌路 電話:

123123123213",point:"120.524011|36.395728",isOpen:0,icon:

{w:32,h:32,l:0,t:0,x:6,lb:5}}]; 這裡呢 就是設定定位的資訊      
提問者評價
謝謝你寫得這麼詳細      

繼續閱讀