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

    随着，导航与地图的运用，在实际生活中的扩展与普及化， 地图功能的运用与开发的需求也越来越多。记得，第一次使用百度地图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;
}

  注意事项：①地图中的坐标系拾取，可以根据百度地图拾取坐标系统，进行实际的转换，把实际地点的地图坐标转换为百度地图的相对应坐标系；②在用经纬度设置地图中心点时，"function theLocation(lngs,lats,title,address,phone,type)"里面的参数可自定义，在本实例中，添加了title标题，address地址，phone电话，到达方式type，并通过onMouseOver鼠标移入,onMouseOut鼠标移出,onClick鼠标点击的事件，与实例地图坐标点相结合，增加交互效果，形成左右联动。

        
 

    	

    		
   		
    			

    				

    					

    						
    				
    			
    			

    				

    					

    						
在线预约
    						

    							

                    

                        
  
                            

                                
                            
                        
                        
  
                            

                                
                                  年级
                                  一年级
                                  二年级
                                  三年级
                                  四年级
                                  一年级
                                  二年级
                                  初一
                                  初二
                                  初三
                                  高一
                                  高二
                                  高三
                                
                            
                        
                        
  
                            

                                
                                  校区
                                  浦东旗舰校区
                                  羽山校区
                                  塘桥校区校区
                                  北蔡大华校区
                                  锦绣国际校区
                                  金桥证大家园校区
                                  高青路校区
                                  金桥大拇指校区
                                  东方路校区
                                  普陀校区
                                  高青路校区
                                  大连路校区
                                  沪闵路校区
                                  七宝校区
                                
                            
                        
                        
   
                           

                                
                          
                        
                        

                          

                            提交预约
                          
                        
                    
    							
    						

    					
    					
						

							

								

									

										浦东旗舰校区
										

										地址：浦东新区羽山路3**号（近民生路）
										

										电话：021-509352**/5067655**
										

										到达方式：6号线民生路站2号口出
									
									

										羽山校区
										

										地址：浦东新区羽山路6**号
										

										电话：021-507019**/507939**
										

										到达方式：6号线民生路站2号步行750米出
									
									

										北蔡大华校区
										

										地址：浦东新区下南路8**号（近成山路）
										

										电话：021-508073**
										

										到达方式：7号线锦绣路站
									
									

										锦绣国际校区
										

										地址：浦东新区北艾路17**号2楼
										

										电话：021-508321**/508321**
										

										到达方式：6号线东明路站，7号线高科西路站
									
									

										金桥证大家园校区
										

										地址：浦东新区利津路13**-13**号二楼（近巨峰路）
										

										电话：021-584355**/584322**
										

										到达方式：6号线巨峰路1号口，12号线巨峰路5号口
									
									

										高青路校区
										

										地址：浦东新区高青路26**号，家乐福（近杨高南路）
										

										电话：021-506101**/506103**
										

										到达方式：6号线高青路站
									
									

										金桥大拇指校区
										

										地址：平度路2**号1号楼3层A-327
										

										电话：021-689108**/689109**
										

										到达方式：6号线金桥路站
									
									

										东方路校区
										

										地址：东方路18**号
										

										电话：021-58375***/58375***
										

										到达方式：6号线金桥路站
									
									

										普陀校区
										

										地址：中山北路2***号中瑞商务大厦301-306室
										

										电话：021-6226****
										

										到达方式：3/4号线镇坪路站3号口出步行717米
									
									

										大连路校区
										

										地址：大连路1***号骏丰国际1楼108
										

										电话：021-6590****
										

										到达方式：10号线四平路站
									
									

										沪闵路校区
										

										地址：闵行区沪闵路7***号1号102室
										

										电话：021-6480****
										

										到达方式：1号线莲花路站
									
									

										七宝校区
										

										地址：闵行区沪星路2**弄顺恒国际广场B305
										

										电话：021-3420****
										

										到达方式：9号线七宝站
									
								
							
						
						
    				
    			
    		
    	
    

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

四、总结

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

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