调用百度地图进行路线规划
生活随笔
收集整理的這篇文章主要介紹了
调用百度地图进行路线规划
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
調(diào)用百度地圖進(jìn)行路線規(guī)劃
需要用到百度地圖API來進(jìn)行定位簽到、路線規(guī)劃、導(dǎo)航等功能，在此做一個總結(jié)，方便以后查閱
大致分為以下幾個步驟
1：準(zhǔn)備頁面（根據(jù)HTML標(biāo)準(zhǔn)，每一份HTML文檔都應(yīng)該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規(guī)范的文檔聲明）
2：適應(yīng)移動端頁面展示（下面我們添加一個meta標(biāo)簽，以便使您的頁面更好的在移動平臺上展示。）
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />3：設(shè)置容器樣式（設(shè)置容器樣式大小，使地圖充滿整個瀏覽器窗口）
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>4：引用百度地圖API文件（注意里面的ak，是在開始之前申請的ak，可以在控制臺找到）
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>5.首先需要實例化一個對象 并通過Geolocation獲取當(dāng)前經(jīng)緯度
var map = new BMap.Map("allmap");var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){//map.panTo(r.point);//獲取經(jīng)緯度// r.point.lng;// r.point.lat//alert('您的位置：'+r.point.lng+','+r.point.lat);map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 11);var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放}else {alert('failed'+this.getStatus());} });6.通過設(shè)置起點或者結(jié)束點來設(shè)置路線
function getRoute(start,end){ var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: BMAP_DRIVING_POLICY_LEAST_DISTANCE});driving.search(start,end);}整體代碼
<!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">#allmap{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}header{margin: 5px auto;font-size: 16px;}.typein{width: 90px;height: 16px;font-size: 16px;}/*.btn{color:#fff;height: 25px;}*/</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6VArBpbbbMjBVP22TflHkpSq"></script><script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> <title>路線查詢</title> </head> <body><header><label for="start">起點:<input type="text" placeholder="請輸入起點" class="typein" id="start"/></label><label for="zhongdian">終點:<input type="text" id="zhongdian" placeholder="請輸入終點" class="typein"/></label><input type="button" class="btn" id="result" value="查詢" /></header><div id="allmap"></div><script type="text/javascript">var map = new BMap.Map("allmap");var lng , lat ;var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){//map.panTo(r.point);lng = r.point.lng;lat = r.point.lat//alert('您的位置：'+r.point.lng+','+r.point.lat);map.centerAndZoom(new BMap.Point(lng, lat), 11);var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放}else {alert('failed'+this.getStatus());} });document.getElementsByClassName("btn")[0].onclick = function(){map.clearOverlays(); var zhongdian = document.getElementById("zhongdian").value;var qidian = document.getElementById("start").value;//從定位地點到終點//search(new BMap.Point(lng, lat),zhongdian,BMAP_DRIVING_POLICY_LEAST_DISTANCE);//從輸入的起點到終點getRoute(qidian,zhongdian);function getRoute(start,end){ var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: BMAP_DRIVING_POLICY_LEAST_DISTANCE});driving.search(start,end);}} </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的调用百度地图进行路线规划的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小葵花妈妈课堂开课了：《Runnable
- 下一篇： 小葵花妈妈课堂开课了：《ArrayLis