调用百度地图进行路线规划
生活随笔
收集整理的這篇文章主要介紹了
调用百度地图进行路线规划
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
調用百度地圖進行路線規劃
需要用到百度地圖API來進行定位簽到、路線規劃、導航等功能，在此做一個總結，方便以后查閱
大致分為以下幾個步驟
1：準備頁面（根據HTML標準，每一份HTML文檔都應該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規范的文檔聲明）
2：適應移動端頁面展示（下面我們添加一個meta標簽，以便使您的頁面更好的在移動平臺上展示。）
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />3：設置容器樣式（設置容器樣式大小，使地圖充滿整個瀏覽器窗口）
<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獲取當前經緯度
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);//獲取經緯度// 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); //開啟鼠標滾輪縮放}else {alert('failed'+this.getStatus());} });6.通過設置起點或者結束點來設置路線
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); //開啟鼠標滾輪縮放}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>總結
以上是生活随笔為你收集整理的调用百度地图进行路线规划的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小葵花妈妈课堂开课了：《Runnable
- 下一篇： 小葵花妈妈课堂开课了：《ArrayLis