百度地图API（WEB端/JavaScript API）--实际运用与扩展

其他 2018-07-04 22:25:44 阅读次数: 0

    随着，导航与地图的运用，在实际生活中的扩展与普及化， 地图功能的运用与开发的需求也越来越多。记得，第一次使用百度地图API的功能的时候，WEB端的运用还很单一。随着移动端、小程序的兴起，百度地图API的功能也越来越完善了，分为WEB开发、Android开发、ios开发、服务接口、工具支持等，如下图所示：

       借着这次在企业网站运用的百度地图API的功能，在此记录一下。

        一、实例相关情况介绍

          参考的实例效果如下所示：

        首先，左边为直接引用的百度地图的实例，可以查看具体的位置与周围的情况，右边为自定义添加的，左边相对应的A,B,C,D......各个地点相对应校区的具体地址、电话、到达方式等具体相关信息。

        ①根据实际需求，在左侧地图中查找出目标地点，通过local.search("教育机构")获得；②在右侧通过下拉列表的方式，枚举出所有符合要求地点的相关详情，并进行样式美化；③通过JS添加动态效果，当点击右侧对应地点时，左侧地图上出现相对应的目标地点的实际位置与相关详细信息，并给选中的地点添加灰色背景。

二、运用的实例代码

#l-map{height:300px;width:100%;}
#r-result{width:100%;}
.campus-map{
	padding-top:50px;
	height:auto;
	padding-bottom:100px;
}
.campus-map .order-box-login{
	background-color:#ef7700;
	padding:10px 10px 40px 10px;
	margin:0px auto;
}
.campus-map .order-box-login h3{
	color:#ffffff;
	margin-bottom:30px;
}
.campus-map .order-box-login .btn-yuyue{
	background-color:#feb810;
	color:#000000;
	font-weight:600;
}
.order-box-login .form-control-input{
	height: 42px;
    padding: 10px 12px;
    border-radius:0px;
    color:#8a8787;
}
.order-box-login .form-control-input option{

}
.campus-map .order-box-login .input-group select.form-control{
	color:#999999;
}
.campus-map .map-order .map-list{
	background-color:#f7f7f7;
	margin:0 auto;
}
.campus-map .map-order .map-list .map-li{	
	padding:20px;
	border-bottom:1px dashed #666666;
}
.main_form_school_list {
    margin-top: 12px;
    margin-top: 12px\0;
    *position: relative;
    *z-index: -1;
}
.district {
    background: #fff;
    margin-bottom: 10px;
    border: 1px solid #dedede;
    color: #999;
}
.district ul {
    padding: 10px 0;
    height: 360px;
    overflow-y: auto;
}
.district ul li {
    padding: 10px 20px;
    border-bottom: 1px dashed #ccc;
    font-size: 12px;
	list-style-type:none;
}
.district ul li strong{
	color:#666666;
	font-size:14px;
}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
							<script type="text/javascript">
                  //百度地图API功能
                  var map = new BMap.Map("l-map");     //创建Map实例
                  map.centerAndZoom(new BMap.Point(121.551072,31.238931),11);  //Map默认初始点坐标
                  map.enableScrollWheelZoom(true);
                  var local = new BMap.LocalSearch(map, {
                  renderOptions: {map: map, panel: "r-result"}
                });
              local.search("教育");  //Map默认检索的关键字

              // 用经纬度设置地图中心点
              function theLocation(lngs,lats,title,address,phone,type){
              map.clearOverlays(); 
              var new_point = new BMap.Point(lngs,lats);
              var marker = new BMap.Marker(new_point);  // 创建标注
              map.addOverlay(marker);              // 将标注添加到地图中
              map.panTo(new_point);
              var opts = {
                  width : 340,     // 信息窗口宽度
                  height: 90,     // 信息窗口高度
                  title : '<b>'+title+'</b>', // 信息窗口标题
              }
             var infoWindow = new BMap.InfoWindow('地址：'+address+"<br/>电话："+phone+"<br/>到达方式："+type, opts);  // 创建信息窗口对象     
              map.openInfoWindow(infoWindow,new_point); //开启信息窗口
            }
						</script>
  注意事项：①地图中的坐标系拾取，可以根据百度地图拾取坐标系统，进行实际的转换，把实际地点的地图坐标转换为百度地图的相对应坐标系；②在用经纬度设置地图中心点时，"function theLocation(lngs,lats,title,address,phone,type)"里面的参数可自定义，在本实例中，添加了title标题，address地址，phone电话，到达方式type，并通过onMouseOver鼠标移入,onMouseOut鼠标移出,onClick鼠标点击的事件，与实例地图坐标点相结合，增加交互效果，形成左右联动。 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>地图</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--Bootstrap中文字体版-->
<link href="css/bootstrap.css" rel="stylesheet">
<!--自定义样式-->
<link href="css/style.css" rel="stylesheet">
</head>
        <body>
 <div class="campus-map">
    	<div class="container">
    		<div class="row">   		
    			<div class="col-xs-12 col-sm-12 col-md-8">
    				<div class="div-map">
    					<div id="l-map" style=" height:800px;border:1px solid #333333;overflow:hidden;"></div>
    						<!--<div id="r-result"></div>实际项目中并未使用，此部分注释掉-->
    				</div>
    			</div>
    			<div class="col-xs-12 col-sm-12 col-md-4">
    				<div class="map-order">
    					<div class="order-box-login">
    						<h3 class="text-center">在线预约</h3>
    						<div class="row">
    							<div class="col-xs-10 col-xs-offset-1">
                    <form class="form-horizontal">
                        <div class="form-group">  
                            <div class="col-xs-12">
                                <input type="text" class="form-control form-control-input" placeholder="孩子姓名">
                            </div>
                        </div>
                        <div class="form-group">  
                            <div class="col-xs-12">
                                <select class="form-control form-control-input">
                                  <option value="年级">年级</option>
                                  <option value="一年级">一年级</option>
                                  <option value="二年级">二年级</option>
                                  <option value="三年级">三年级</option>
                                  <option value="四年级">四年级</option>
                                  <option value="五年级">一年级</option>
                                  <option value="六年级">二年级</option>
                                  <option value="初一">初一</option>
                                  <option value="初二">初二</option>
                                  <option value="初三">初三</option>
                                  <option value="高一">高一</option>
                                  <option value="高二">高二</option>
                                  <option value="高三">高三</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">  
                            <div class="col-xs-12">
                                <select class="form-control form-control-input">
                                  <option value="校区">校区</option>
                                  <option value="浦东旗舰校区">浦东旗舰校区</option>
                                  <option value="羽山校区">羽山校区</option>
                                  <option value="塘桥校区">塘桥校区校区</option>
                                  <option value="北蔡大华校区">北蔡大华校区</option>
                                  <option value="锦绣国际校区">锦绣国际校区</option>
                                  <option value="金桥证大家园校区">金桥证大家园校区</option>
                                  <option value="高青路校区">高青路校区</option>
                                  <option value="金桥大拇指校区">金桥大拇指校区</option>
                                  <option value="东方路校区">东方路校区</option>
                                  <option value="普陀校区">普陀校区</option>
                                  <option value="高青路校区">高青路校区</option>
                                  <option value="大连路校区">大连路校区</option>
                                  <option value="沪闵路校区">沪闵路校区</option>
                                  <option value="七宝校区">七宝校区</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">   
                           <div class="col-xs-12">
                                <input type="text" class="form-control form-control-input" placeholder="手机号">
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-xs-12">
                            <button type="submit" class="btn btn-block btn-lg btn-yuyue">提交预约</button>
                          </div>
                        </div>
                    </form>
    							</div>
    						</div>

    					</div>
    					
						<div class="main_form_school_list" class="main_form_school_list">
							<div class="district">
								<ul id="school_right-list" style="position:relative;">
									<li id="school_right_438" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.551072,31.238931,'浦东旗舰校区','浦东新区羽山路3**号（近民生路）','021-509352**/5067655**','6号线民生路站2号口出')">
										<strong>浦东旗舰校区</strong>
										<br>
										地址：浦东新区羽山路3**号（近民生路）
										<br>
										电话：021-509352**/5067655**
										<br>
										到达方式：6号线民生路站2号口出
									</li>
									<li id="school_right_439" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.555762,31.240751,'羽山校区','浦东新区羽山路6**号','021-507019**/507939**','6号线民生路站2号步行750米出')">
										<strong>羽山校区</strong>
										<br>
										地址：浦东新区羽山路6**号
										<br>
										电话：021-507019**/507939**
										<br>
										到达方式：6号线民生路站2号步行750米出
									</li>
									<li id="school_right_440" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.542208,31.187423,'北蔡大华校区','浦东新区下南路8**号（近成山路）','021-50807***','7号线锦绣路站')">
										<strong>北蔡大华校区</strong>
										<br>
										地址：浦东新区下南路8**号（近成山路）
										<br>
										电话：021-508073**
										<br>
										到达方式：7号线锦绣路站
									</li>
									<li id="school_right_441" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.529304,31.18599,'锦绣国际校区','浦东新区北艾路1***号2楼','021-5083****/5083****','6号线东明路站，7号线高科西路站')">
										<strong>锦绣国际校区</strong>
										<br>
										地址：浦东新区北艾路17**号2楼
										<br>
										电话：021-508321**/508321**
										<br>
										到达方式：6号线东明路站，7号线高科西路站
									</li>
									<li id="school_right_442" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.600215,31.28925,'金桥证大家园校区','浦东新区利津路1***-1***号二楼（近巨峰路）','021-5843****/5843****','6号线巨峰路1号口，12号线巨峰路5号口')">
										<strong>金桥证大家园校区</strong>
										<br>
										地址：浦东新区利津路13**-13**号二楼（近巨峰路）
										<br>
										电话：021-584355**/584322**
										<br>
										到达方式：6号线巨峰路1号口，12号线巨峰路5号口
									</li>
									<li id="school_right_443" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.531031,31.166735,'高青路校区','浦东新区高青路2***号，家乐福（近杨高南路）','021-5061****/5061****','6号线高青路站')">
										<strong>高青路校区</strong>
										<br>
										地址：浦东新区高青路26**号，家乐福（近杨高南路）
										<br>
										电话：021-506101**/506103**
										<br>
										到达方式：6号线高青路站
									</li>
									<li id="school_right_444" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.597887,31.260103,'金桥大拇指校区','平度路2**号1号楼3层A-327','021-6891****/6891****','6号线金桥路站')">
										<strong>金桥大拇指校区</strong>
										<br>
										地址：平度路2**号1号楼3层A-327
										<br>
										电话：021-689108**/689109**
										<br>
										到达方式：6号线金桥路站
									</li>
									<li id="school_right_445" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.529101,31.208412,'东方路校区','东方路1***号','021-5837****/5837****','6号线金桥路站')">
										<strong>东方路校区</strong>
										<br>
										地址：东方路18**号
										<br>
										电话：021-58375***/58375***
										<br>
										到达方式：6号线金桥路站
									</li>
									<li id="school_right_446" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.43097,31.250343,'普陀校区','中山北路2****号中瑞商务大厦301-306室','021-6226****','3/4号线镇坪路站3号口出步行717米')">
										<strong>普陀校区</strong>
										<br>
										地址：中山北路2***号中瑞商务大厦301-306室
										<br>
										电话：021-6226****
										<br>
										到达方式：3/4号线镇坪路站3号口出步行717米
									</li>
									<li id="school_right_447" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.508537,31.279553,'大连路校区','大连路1***号骏丰国际1楼108','021-6590****','10号线四平路站')">
										<strong>大连路校区</strong>
										<br>
										地址：大连路1***号骏丰国际1楼108
										<br>
										电话：021-6590****
										<br>
										到达方式：10号线四平路站
									</li>
									<li id="school_right_448" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.412653,31.141993,'沪闵路校区','闵行区沪闵路7900号1号102室','021-64802123','1号线莲花路站')">
										<strong>沪闵路校区</strong>
										<br>
										地址：闵行区沪闵路7***号1号102室
										<br>
										电话：021-6480****
										<br>
										到达方式：1号线莲花路站
									</li>
									<li id="school_right_449" onMouseOver="this.style.backgroundColor='#eee'" onMouseOut="this.style.backgroundColor='#fff'" style="position:relative;cursor:pointer;background-color:rgb(255,255,255);" onClick="theLocation(121.345239,31.169615,'七宝校区','闵行区沪星路2**弄顺恒国际广场B305','021-3420****','9号线七宝站')">
										<strong>七宝校区</strong>
										<br>
										地址：闵行区沪星路2**弄顺恒国际广场B305
										<br>
										电话：021-3420****
										<br>
										到达方式：9号线七宝站
									</li>
								</ul>
							</div>
						</div>
						
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

三、运用的POI详情展示的实例demo

<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">
		body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
		#l-map{height:300px;width:100%;}
		#r-result{width:100%;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<title>本地搜索的结果面板</title>
</head>
<body>
	<div id="l-map"></div>
	<div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("l-map");            // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
	var local = new BMap.LocalSearch(map, {
		renderOptions: {map: map, panel: "r-result"}
	});
	local.search("餐饮");
</script>

四、总结

        在实际的案例中，使用的JS方法参考了网上的相关案例，进行了自定义的设置。如文章哪里有问题，欢迎大家留言，进行指正，谢谢！


版权声明：本文为博主原创文章，未经博主允许不得转载。

猜你喜欢

转载自blog.csdn.net/qq_26780317/article/details/80395670
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022