devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS实现百度地图_js 百度导航

作者：我家小花儿 | 2024-03-23 21:02:03

赞

踩

js 百度导航

使用JavaScript技术，利用api接口开发百度地图简单方便。


1.设置整体页面的布局样式

  1. <style type="text/css">
  2.         body, html{width:100%;height:100%;margin:0;font-family:"微软雅黑";}
  3. 		#point{width:980px;min-height:160px;margin-left:12px;margin-top:6px;margin:0 auto;padding-left:2px;}
  4. 		#map{height:1060px;width:1160px;margin:0 auto;margin-top:16px;margin-bottom:8px;}
  5. 		#r-result{width:1080px;min-height:80px;margin-top:10px;padding-left:2px;margin:0 auto;}
  6. 		#r-result table{width:100%;}
  7. </style>

2. 最重要的就是利用api接口获取地图数据，设置Maker标记，选择出行策略

  1. <!-- js技术 -->
  2. <script type="text/javascript">
  3.     window.onload = loadScript;
  4.     // 首次加载的函数
  5.    function loadScript() {  
  6.      var script = document.createElement("script");
  7. 	 // 申请的AK
  8.      script.src = "http://api.map.baidu.com/api?v=2.0&ak=YBPGfONGeN2ENSn9YzACYCGzazCKsZsb&callback=initialize";//此为v2.0版本的引用方式  
  9.      // 百度地图API功能
  10.      document.body.appendChild(script);
  11. 	 // 自动定位启动
  12.      autoLocation();
  13.   }   
  14.   // 定义全局变量
  15.   var map ;
  16.   var startAddr,endAddr;
  17.   var startCity = "天津",endCity="";
  18.  
  19.   // 初始化处理 ： Called first
  20.   function initialize() 
  21.   {  
  22.       map = new BMap.Map("map");
  23.  
  24. 	  //初始化地图,设置城市和地图级别
  25. 	  // 默认定位点设置
  26. 	  map.centerAndZoom(startCity,12);
  27. 	  document.getElementById("start").value = startCity;
  28. 	  if(endCity != ""){
  29. 	      
  30. 	  }
  31. 	  map.enableScrollWheelZoom();
  32.       map.enableInertialDragging();
  33.       map.enableContinuousZoom();
  34. 	  
  35. 	  // var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
  36. 	  // var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区
  37. 	  //alert('从大渡口区到江北区的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位
  38. 	  //var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5});  //定义折线
  39. 	  //map.addOverlay(polyline);     //添加折线到地图上
  40.     
  41. 	 // 地图控制控件
  42. 	var bottom_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左下角，添加比例尺
  43. 	var bottom_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT});  //左下角，添加默认缩放平移控件
  44. 	/*缩放控件type有四种类型:
  45. 	     BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮
  46.     */
  47. 	//添加控件和比例尺
  48. 	map.addControl(bottom_left_control);        
  49. 	map.addControl(bottom_left_navigation);     
  50. 	
  51. 	// 添加手动定位控件
  52.     var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
  53.     geolocationControl.addEventListener("locationSuccess", function(e){
  54.         // 定位成功事件
  55.         var address = "";
  56.         address += e.addressComponent.province;
  57.         address += e.addressComponent.city;
  58.         address += e.addressComponent.district;
  59.         address += e.addressComponent.street;
  60.         address += e.addressComponent.streetNumber;
  61. 		// 改变定位后的城市名
  62. 		startCity = address;
  63. 		document.getElementById("start").value = address;
  64. 		// 清空Maker
  65. 		map.clearOverlays();
  66.         alert("当前定位地址为：" + address);
  67. 		initialize();
  68.      });
  69.     geolocationControl.addEventListener("locationError",function(e){
  70.        // 定位失败事件
  71.        alert(e.message);
  72.     });
  73.     map.addControl(geolocationControl);
  74.  
  75.     //2D图，卫星图 
  76.     var mapType1 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
  77.     map.addControl(mapType1);
  78.     
  79. 	// 默认选择步行策略
  80. 	//showPolicy(1);
  81.  
  82.  }  
  83.    // 自动定位处理 : 根据浏览器的地址获取经纬度
  84.    function autoLocation()
  85.    {
  86.        var geolocation = new BMap.Geolocation();
  87. 	   geolocation.getCurrentPosition(function(r){
  88. 		  if(this.getStatus() == BMAP_STATUS_INVALID_REQUEST){
  89. 		      alert("非法请求");
  90. 			  return;
  91. 		  }
  92. 		  if(this.getStatus() == BMAP_STATUS_PERMISSION_DENIED){
  93. 		      alert("没有开启定位权限");
  94. 			  return;
  95. 		  }
  96. 		  if(this.getStatus() == BMAP_STATUS_SERVICE_UNAVAILABLE){
  97. 		      alert("服务不可用");
  98. 			  return;
  99. 		  }
  100. 		  if(this.getStatus() == BMAP_STATUS_TIMEOUT){
  101. 		      alert("网络超时");
  102. 			  return;
  103. 		  }
  104. 		  if(this.getStatus() == BMAP_STATUS_SUCCESS){
  105.               var geoc = new BMap.Geocoder();
  106.               var startPoint = new BMap.Point(r.point.lng,r.point.lat);
  107. 			  var mk = new BMap.Marker(startPoint);
  108. 			  map.panTo(r.point);
  109. 			  map.addOverlay(mk);
  110.               geoc.getLocation(startPoint, function(rs){
  111. 				 // 根据经纬度获取物理地址信息 
  112. 			     var addComp = rs.addressComponents;
  113.                  // 改变定位后的城市名
  114. 		         startCity = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
  115. 		         document.getElementById("start").value = startCity;
  116. 			     alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
  117. 		      });
  118. 			 // alert('当前位置：'+r.point.lng+','+r.point.lat);
  119. 	      }else {
  120. 			  alert('failed'+this.getStatus());
  121. 	     }        
  122. 	   },{enableHighAccuracy: true})
  123. 	  //关于状态码
  124. 	  //BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
  125. 	  //BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
  126. 	  //BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
  127. 	  //BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
  128. 	  //BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
  129. 	  //BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
  130. 	  //BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
  131. 	  //BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
  132. 	  //BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)
  133.    }
  134.    // 地址解析
  135.   
  136.    // 逆地址解析 ：输入框发生变化事件
  137.    function onChangeS()
  138.    {
  139. 	  // 起始
  140.       var start = document.getElementById("start").value;
  141. 	  var myGeo = new BMap.Geocoder();
  142. 	  // 将地址解析结果显示在地图上,并调整地图视野
  143. 	  myGeo.getPoint(start, function(point){
  144. 		 if (point) {
  145. 			 startCity = start;
  146. 			 map.clearOverlays();
  147. 			 map.centerAndZoom(startCity,12);
  148. 			 map.panTo(point);
  149. 			 map.addOverlay(new BMap.Marker(point));
  150. 			 document.getElementById("start").value = startCity;
  151. 			 //initialize();
  152. 		 }else{
  153. 			 alert("您输入地址没有解析到结果!");
  154. 		 }
  155. 	 }, "");
  156.    }
  157.    function onChangeE()
  158.    {
  159. 	  // 终止
  160. 	  var end = document.getElementById("end").value;
  161. 	  var myGeo = new BMap.Geocoder();
  162. 	  // 将地址解析结果显示在地图上,并调整地图视野
  163. 	  myGeo.getPoint(end, function(point){
  164. 		 if (point) {
  165. 			 endCity = end;
  166. 			 map.clearOverlays();
  167. 			 map.centerAndZoom(endCity,12);
  168. 			 map.panTo(point);
  169. 			 map.addOverlay(new BMap.Marker(point));
  170. 			 document.getElementById("end").value = endCity;
  171. 			 //initialize();
  172. 		 }else{
  173. 			 alert("您输入地址没有解析到结果!");
  174. 		 }
  175. 	 }, "");
  176.    }
  177.    // 对起终点设置的处理函数
  178.    function theLocation()
  179.    {
  180. 	   // 通过经纬度设置Maker标记
  181.        if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "")
  182. 	   {
  183. 			map.clearOverlays(); 
  184. 			var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
  185. 			var marker = new BMap.Marker(new_point);  // 创建标注
  186. 			map.addOverlay(marker);              // 将标注添加到地图中
  187. 			map.panTo(new_point);      
  188. 		}
  189.     }
  190.     // 出行策略
  191. 	/*
  192. 	* 1. 步行  2. 驾车
  193. 	*/
  194. 	function showPolicy(index)
  195. 	{
  196. 		if(startCity == ""){
  197. 		    alert("请输入出发点");
  198. 			return;
  199. 		}
  200. 		if(endCity == ""){
  201. 		    alert("请输入目的地");
  202. 			return;
  203. 		}
  204. 	    if(index == 1){
  205. 		    // 步行
  206. 			map.clearOverlays();
  207. 			map.centerAndZoom(startCity,12);
  208. 	        var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true }});
  209. 	        walking.search(startCity, endCity);
  210. 		}
  211. 		if(index == 2){
  212. 			//公交
  213. 		    map.clearOverlays();
  214. 			map.centerAndZoom(startCity,12);
  215. 		    var routePolicy = [BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRANSFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS];
  216. 	        var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
  217. 		    transit.setPolicy(routePolicy[0]);
  218. 	        transit.search(startCity, endCity);
  219. 		}
  220. 		if(index == 3){
  221. 		    // 驾车
  222. 			map.clearOverlays();
  223. 			map.centerAndZoom(startCity,12);
  224. 	        var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
  225. 	        driving.search(startCity, endCity);
  226. 		}
  227. 	}
  228.    // 获取搜索框输入的内容
  229.    function submitSearch()
  230.    {
  231.        var value = document.getElementById("searchValue").value;
  232. 	   if(value != ""){
  233. 	      search("'"+value+"'");
  234. 	   }else{
  235. 	       alert("请输入搜索关键字");
  236. 	   }
  237.    }
  238.    // 搜索内容并返回结果
  239.    function search(str)
  240.    {
  241. 	   if(str != ""){
  242. 		   map.clearOverlays();
  243. 		   map.centerAndZoom(startCity,12);
  244.            var local = new BMap.LocalSearch(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
  245. 	       local.search(str);
  246. 	   }else{
  247. 	       alert("搜索内容错误");
  248. 	   }
  249.    } 
  250. </script>

3. 页面布局css 

  1. <body>
  2.   <div id="" 
  3.       style="width:1120px;height:30px;margin:0 auto;font-size:18px;background:#0000cc;color:#fff;text-align:left;padding-left:24px;padding-top:8px;padding-bottom:6px;">
  4. 	  | 出行游玩，定制属于自我的Map
  5.   </div>
  6.   
  7.   <div id="point">
  8.           我的位置: <input id="start" type="text" size="28px" style="width:136px; margin-right:10px;" οnchange="onChangeS()"/>  ——>  
  9. 	      目的地: <input id="end" type="text" size="28px" style="width:136px; margin-right:10px;" οnchange="onChangeE()"/>
  10. 	      <input type="button" value="确定" style="width:54px; font-size:18px;margin-right:10px;margin-top:16px;background:#888;" οnclick="showPolicy(1)" />
  11.           <br/><p>
  12. 		  <div style="width:100%;height:30px;margin-bottom:2px;padding-bottom:0px;">
  13. 		      <div style="width:188px;float:left;background:#066;color:#fff;margin-bottom:4px;margin-top:0px;padding-top:4px;padding-bottom:4px;text-align:center;font-size:18px;">
  14. 			      出行策略
  15. 			  </div>
  16. 		      <div style="float:left;margin-left:6px;padding-top:5px;">
  17. 			      <input type="radio" value="policy_1" name="policy"
  18. 		              style="font-size:18px;margin-right:10px;color:#fff;" οnclick="showPolicy(1)" >步行</input>
  19. 		          <input type="radio" value="policy_2" name="policy"
  20. 		              style="font-size:18px;margin-right:10px;color:#fff;" οnclick="showPolicy(2)" >公交出行</input>
  21. 		          <input type="radio" value="policy_3" name="policy"
  22. 		              style="font-size:18px;margin-right:10px;color:#fff;" οnclick="showPolicy(3)" >驾车出行</input>
  23. 			  </div>
  24. 		  </div>
  25. 		  <br/>
  26. 		  <div style="width:100%;height:30px;margin-bottom:4px;margin-top:0px;">
  27. 		      <div style="width:188px;float:left;background:#066;color:#fff;margin-top:4px;padding-top:4px;padding-bottom:4px;text-align:center;font-size:18px;">搜索周边</div>
  28. 		      <div style="width:24px;float:left;margin-left:28px;margin-top:8px;margin-right:8px;">
  29. 		          <input type="text" id="searchValue" size="22px"/>
  30. 			  </div>
  31. 			  <div style="width:36px;float:left;margin-top:8px;margin-left:168px;">
  32. 			      <input type="button" οnclick="submitSearch()" style="font-size:16px;border:solid 1;"
  33. 				     onMouseOver="JavaScript:this.style.background='#00ce00'" onMouseOut="this.style.background=''" value="搜索" />
  34. 		      </div>
  35. 		  </div>
  36. 		  <div style="width:100%;margin-top:16px;margin-left:26px;margin-bottom:8px;">
  37. 		     <input type="button" value="餐饮" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c33;color:#fff;" 
  38. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('餐饮')"/>
  39. 		     <input type="button" value="酒店" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#068;color:#fff;"
  40. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('酒店')"/>
  41. 		     <input type="button" value="地铁" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c36;color:#fff;" 
  42. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('地铁')"/>
  43. 		     <input type="button" value="公交" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#888;color:#fff;"
  44. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('公交')"/>
  45. 		     <input type="button" value="周围景点" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#033;color:#fff;" 
  46. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('景点')"/>
  47. 		     <input type="button" value="公园" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#09c;color:#fff;" 
  48. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('公园')"/>
  49. 		     <input type="button" value="小吃街" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#906;color:#fff;"
  50. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('小吃')"/>
  51. 		     <input type="button" value="游乐场" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#936;color:#fff;" 
  52. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('游乐场')"/>
  53. 			 <input type="button" value="KTV" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c00;color:#fff;" 
  54. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('KTV')"/>
  55. 		     <input type="button" value="商业街巷" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#963;color:#fff;" 
  56. 			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('商业街巷')"/>
  57. 			 <input type="button" value="搜索更多>>" style="background:#fff;color:#000;border:0;clickable:false;">
  58. 		  </div>
  59.       </div>
  60.  
  61.   <div id="map"></div>
  62.   <div id="r-result"></div>
  63. </body>  
  64. </html>

以下是结果截图

| 出行游玩，定制属于自我的Map
我的位置:   ——>   目的地:

出行策略
步行 公交出行 驾车出行

搜索周边
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/297668
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号