JS实现百度地图

最新推荐文章于 2024-04-09 15:20:10 发布
最新推荐文章于 2024-04-09 15:20:10 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： web 文章标签： javascript 地图 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31414433/article/details/55004100
版权

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


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

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

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

<!-- js技术 -->
<script type="text/javascript">
    window.onload = loadScript;
    // 首次加载的函数
   function loadScript() {  
     var script = document.createElement("script");
	 // 申请的AK
     script.src = "http://api.map.baidu.com/api?v=2.0&ak=YBPGfONGeN2ENSn9YzACYCGzazCKsZsb&callback=initialize";//此为v2.0版本的引用方式  
     // 百度地图API功能
     document.body.appendChild(script);
	 // 自动定位启动
     autoLocation();
  }   
  // 定义全局变量
  var map ;
  var startAddr,endAddr;
  var startCity = "天津",endCity="";

  // 初始化处理 ： Called first
  function initialize() 
  {  
      map = new BMap.Map("map");

	  //初始化地图,设置城市和地图级别
	  // 默认定位点设置
	  map.centerAndZoom(startCity,12);
	  document.getElementById("start").value = startCity;
	  if(endCity != ""){
	      
	  }
	  map.enableScrollWheelZoom();
      map.enableInertialDragging();
      map.enableContinuousZoom();
	  
	  // var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
	  // var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区
	  //alert('从大渡口区到江北区的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位
	  //var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5});  //定义折线
	  //map.addOverlay(polyline);     //添加折线到地图上
    
	 // 地图控制控件
	var bottom_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左下角，添加比例尺
	var bottom_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT});  //左下角，添加默认缩放平移控件
	/*缩放控件type有四种类型:
	     BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮
    */
	//添加控件和比例尺
	map.addControl(bottom_left_control);        
	map.addControl(bottom_left_navigation);     
	
	// 添加手动定位控件
    var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
    geolocationControl.addEventListener("locationSuccess", function(e){
        // 定位成功事件
        var address = "";
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
		// 改变定位后的城市名
		startCity = address;
		document.getElementById("start").value = address;
		// 清空Maker
		map.clearOverlays();
        alert("当前定位地址为：" + address);
		initialize();
     });
    geolocationControl.addEventListener("locationError",function(e){
       // 定位失败事件
       alert(e.message);
    });
    map.addControl(geolocationControl);

    //2D图，卫星图 
    var mapType1 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
    map.addControl(mapType1);
    
	// 默认选择步行策略
	//showPolicy(1);

 }  
   // 自动定位处理 : 根据浏览器的地址获取经纬度
   function autoLocation()
   {
       var geolocation = new BMap.Geolocation();
	   geolocation.getCurrentPosition(function(r){
		  if(this.getStatus() == BMAP_STATUS_INVALID_REQUEST){
		      alert("非法请求");
			  return;
		  }
		  if(this.getStatus() == BMAP_STATUS_PERMISSION_DENIED){
		      alert("没有开启定位权限");
			  return;
		  }
		  if(this.getStatus() == BMAP_STATUS_SERVICE_UNAVAILABLE){
		      alert("服务不可用");
			  return;
		  }
		  if(this.getStatus() == BMAP_STATUS_TIMEOUT){
		      alert("网络超时");
			  return;
		  }
		  if(this.getStatus() == BMAP_STATUS_SUCCESS){
              var geoc = new BMap.Geocoder();
              var startPoint = new BMap.Point(r.point.lng,r.point.lat);
			  var mk = new BMap.Marker(startPoint);
			  map.panTo(r.point);
			  map.addOverlay(mk);
              geoc.getLocation(startPoint, function(rs){
				 // 根据经纬度获取物理地址信息 
			     var addComp = rs.addressComponents;
                 // 改变定位后的城市名
		         startCity = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
		         document.getElementById("start").value = startCity;
			     alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
		      });
			 // alert('当前位置：'+r.point.lng+','+r.point.lat);
	      }else {
			  alert('failed'+this.getStatus());
	     }        
	   },{enableHighAccuracy: true})
	  //关于状态码
	  //BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
	  //BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
	  //BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
	  //BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
	  //BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
	  //BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
	  //BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
	  //BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
	  //BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)
   }
   // 地址解析
  
   // 逆地址解析 ：输入框发生变化事件
   function onChangeS()
   {
	  // 起始
      var start = document.getElementById("start").value;
	  var myGeo = new BMap.Geocoder();
	  // 将地址解析结果显示在地图上,并调整地图视野
	  myGeo.getPoint(start, function(point){
		 if (point) {
			 startCity = start;
			 map.clearOverlays();
			 map.centerAndZoom(startCity,12);
			 map.panTo(point);
			 map.addOverlay(new BMap.Marker(point));
			 document.getElementById("start").value = startCity;
			 //initialize();
		 }else{
			 alert("您输入地址没有解析到结果!");
		 }
	 }, "");
   }
   function onChangeE()
   {
	  // 终止
	  var end = document.getElementById("end").value;
	  var myGeo = new BMap.Geocoder();
	  // 将地址解析结果显示在地图上,并调整地图视野
	  myGeo.getPoint(end, function(point){
		 if (point) {
			 endCity = end;
			 map.clearOverlays();
			 map.centerAndZoom(endCity,12);
			 map.panTo(point);
			 map.addOverlay(new BMap.Marker(point));
			 document.getElementById("end").value = endCity;
			 //initialize();
		 }else{
			 alert("您输入地址没有解析到结果!");
		 }
	 }, "");
   }
   // 对起终点设置的处理函数
   function theLocation()
   {
	   // 通过经纬度设置Maker标记
       if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "")
	   {
			map.clearOverlays(); 
			var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
			var marker = new BMap.Marker(new_point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中
			map.panTo(new_point);      
		}
    }
    // 出行策略
	/*
	* 1. 步行  2. 驾车
	*/
	function showPolicy(index)
	{
		if(startCity == ""){
		    alert("请输入出发点");
			return;
		}
		if(endCity == ""){
		    alert("请输入目的地");
			return;
		}
	    if(index == 1){
		    // 步行
			map.clearOverlays();
			map.centerAndZoom(startCity,12);
	        var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true }});
	        walking.search(startCity, endCity);
		}
		if(index == 2){
			//公交
		    map.clearOverlays();
			map.centerAndZoom(startCity,12);
		    var routePolicy = [BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRANSFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS];
	        var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
		    transit.setPolicy(routePolicy[0]);
	        transit.search(startCity, endCity);
		}
		if(index == 3){
		    // 驾车
			map.clearOverlays();
			map.centerAndZoom(startCity,12);
	        var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
	        driving.search(startCity, endCity);
		}
	}
   // 获取搜索框输入的内容
   function submitSearch()
   {
       var value = document.getElementById("searchValue").value;
	   if(value != ""){
	      search("'"+value+"'");
	   }else{
	       alert("请输入搜索关键字");
	   }
   }
   // 搜索内容并返回结果
   function search(str)
   {
	   if(str != ""){
		   map.clearOverlays();
		   map.centerAndZoom(startCity,12);
           var local = new BMap.LocalSearch(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
	       local.search(str);
	   }else{
	       alert("搜索内容错误");
	   }
   } 
</script>

3. 页面布局css 

<body>
  <div id="" 
      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;">
	  | 出行游玩，定制属于自我的Map
  </div>
  
  <div id="point">
          我的位置: <input id="start" type="text" size="28px" style="width:136px; margin-right:10px;" οnchange="onChangeS()"/>  ——>  
	      目的地: <input id="end" type="text" size="28px" style="width:136px; margin-right:10px;" οnchange="onChangeE()"/>
	      <input type="button" value="确定" style="width:54px; font-size:18px;margin-right:10px;margin-top:16px;background:#888;" οnclick="showPolicy(1)" />
          <br/><p>
		  <div style="width:100%;height:30px;margin-bottom:2px;padding-bottom:0px;">
		      <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;">
			      出行策略
			  </div>
		      <div style="float:left;margin-left:6px;padding-top:5px;">
			      <input type="radio" value="policy_1" name="policy"
		              style="font-size:18px;margin-right:10px;color:#fff;" οnclick="showPolicy(1)" >步行</input>
		          <input type="radio" value="policy_2" name="policy"
		              style="font-size:18px;margin-right:10px;color:#fff;" οnclick="showPolicy(2)" >公交出行</input>
		          <input type="radio" value="policy_3" name="policy"
		              style="font-size:18px;margin-right:10px;color:#fff;" οnclick="showPolicy(3)" >驾车出行</input>
			  </div>
		  </div>
		  <br/>
		  <div style="width:100%;height:30px;margin-bottom:4px;margin-top:0px;">
		      <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>
		      <div style="width:24px;float:left;margin-left:28px;margin-top:8px;margin-right:8px;">
		          <input type="text" id="searchValue" size="22px"/>
			  </div>
			  <div style="width:36px;float:left;margin-top:8px;margin-left:168px;">
			      <input type="button" οnclick="submitSearch()" style="font-size:16px;border:solid 1;"
				     onMouseOver="JavaScript:this.style.background='#00ce00'" onMouseOut="this.style.background=''" value="搜索" />
		      </div>
		  </div>
		  <div style="width:100%;margin-top:16px;margin-left:26px;margin-bottom:8px;">
		     <input type="button" value="餐饮" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c33;color:#fff;" 
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('餐饮')"/>
		     <input type="button" value="酒店" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#068;color:#fff;"
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('酒店')"/>
		     <input type="button" value="地铁" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c36;color:#fff;" 
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('地铁')"/>
		     <input type="button" value="公交" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#888;color:#fff;"
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('公交')"/>
		     <input type="button" value="周围景点" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#033;color:#fff;" 
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('景点')"/>
		     <input type="button" value="公园" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#09c;color:#fff;" 
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('公园')"/>
		     <input type="button" value="小吃街" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#906;color:#fff;"
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('小吃')"/>
		     <input type="button" value="游乐场" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#936;color:#fff;" 
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('游乐场')"/>
			 <input type="button" value="KTV" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c00;color:#fff;" 
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('KTV')"/>
		     <input type="button" value="商业街巷" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#963;color:#fff;" 
			         onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" οnclick="search('商业街巷')"/>
			 <input type="button" value="搜索更多>>" style="background:#fff;color:#000;border:0;clickable:false;">
		  </div>
      </div>

  <div id="map"></div>
  <div id="r-result"></div>
</body>  
</html>

以下是结果截图

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

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

搜索周边
2进制
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图（前端入门学习）
weixin_45031595的博客
12-22 692
参考文档 百度地图官网 百度地图教程
bmap.js
AS、SD的博客
08-25 941
/* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you un.
高德地图JS 离线部署方案，实现插件离线加载，自定义添加插件如RangingTool、ToolBar、Scale等
最新发布
qq_26123545的博客
04-09 2181
高德地图JS 离线部署方案，实现插件离线加载，支持自定义添加插件如RangingTool、ToolBar、Scale等
百度地图H5/app 导航
℡メ㏑╭ァ小凯
10-01 544
【代码】百度地图H5/app 导航。
百度地图bmap.js
09-05
是echarts和百度地图结合时需要导入的百度地图的js文件
bmap.min.js
11-07
ECharts 百度地图扩展插件bmap.min.js
php+js实现百度地图多点标注的方法
12-18
本文实例讲述了php+js实现百度地图多点标注的方法。分享给大家供大家参考，具体如下： 1.php创建json数据 $products = $this->product_db->select($where); $products_json = json_encode($products); 2.js传入...
javascript实现百度地图鼠标滑动事件显示、隐藏
10-24
主要介绍了javascript实现百度地图鼠标滑动事件显示、隐藏的思路和方法，十分的实用，这里推荐给小伙伴们，有需要的朋友可以参考下。
js实现百度地图同时显示多个路书效果
01-20
本文介绍了js实现百度地图同时显示多个路书效果，主要是以自行车的还车地点作为实例，具体代码如下： 启动路书： [removed][removed] [removed][removed]<!--路书 --> var BMapLib = window.BMapLib = ...
JS代码实现百度地图 画圆 删除标注
10-21
在本文中，我们将深入探讨如何使用JavaScript（JS）代码实现在百度地图上画圆以及删除标注的功能。这个功能对于地理信息系统应用或者地图相关的Web开发项目非常有用，它可以帮助用户直观地查看特定区域内的兴趣点，...
百度地图扩展包bmap.js
06-19
百度地图扩展包，可用于Echarts使用百度地图作为底图。ECharts是一个使用 JavaScript 实现的开源可视化库。
百度地图路线规划
12-18
百度地图路线规划
自定义百度地图 js 驾车 路线规划 markers自定义
10-24
百度的驾车 起点终点 标注 Markers 自定义 自定义Markers多个标注 标注添加文字
js绘制中国地图
王命风的博客
12-21 7643
简介 本文主要介绍如何利用d3.js绘制中国地图 效果图 用到的数据 china.geojson 代码 引用相关依赖 html部分 程序主体部分 var svg = d3.select("svg"); var projection = d3.geoMercator() .center([107, 31]
html 页面定位失效,html5自动定位，总是定位失败，是什么原因，求指点，多谢...
weixin_42395669的博客
06-03 1126
html5自动定位失败，改用百度服务类提供的Geolocation()方法解决；引入：具体解决代码如下：var geolocation = new BMap.Geolocation();var gc = new BMap.Geocoder();geolocation.getCurrentPosition( function(r) {// 定位结果对象会传递给r变量if(this.getStatus...
html百度地图导航起点默认定位位置,关于javascript:百度地图定位和导航
weixin_30914751的博客
06-04 793
页面初始化时，加载百度地图JS，加载实现后执行回调函数开始定位，定位胜利后初始化地图对象，计算导航路线，而后展现。反对IP定位须要在页面标签引入的JS：vue单文件组件：mounted () {this.loadBaiduMapAsync()},methods: {/*** 初始化百度地图并定位用户以后地位*/loadBaiduMapAsync() {// 加载百度地图jslet script =...
最简洁的方式，实现web端百度地图一键定位导航
热门推荐
小圣贤君的博客
01-22 1万+
web开发过程中经常碰到需要调用百度地图来视线定位导航的过程，许多技术博客上介绍的都是调用百度地图的api，来自定义各种效果，这是一种方式。如果没有特殊需求的话，可以采用笔者下面的方式，一句话就可以实现定位导览和导航功能。 window.location.href = "http://api.map.baidu.com/marker?location=" + lat + "," + lng
javascript实现中国地图
极客神殿
09-19 3111
主要用到 Raphael 2.2.0 JS库<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-sca
js实现百度地图转化成谷歌地图
07-12
要将百度地图转换为谷歌地图，您可以使用百度地图的坐标转换API来将百度地图的坐标转换为谷歌地图的坐标，然后使用谷歌地图的API在页面上显示谷歌地图。 以下是一个简单的示例代码： ```html <!DOCTYPE html> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值