zoukankan      html  css  js  c++  java
  • 百度地图api调用公交车路线和驾车路线

    contoller

    package com.cpic.caf.user.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    
    @Controller
    public class MarriageRegistrationController {
    
    	
    	@RequestMapping(value="/marr/search")
    	public ModelAndView toSelectSerach(String province,String citys,String county){
    		System.out.print(province+" ");
    		System.out.print(citys+" ");
    		System.out.print(county+" ");
    		ModelAndView mv =  new ModelAndView();
    		mv.addObject("province", province);
    		mv.addObject("citys", citys);
    		mv.addObject("county", county);
    		mv.setViewName("/user/marriageRegistrationDetail");
    		return mv;
    	}
    	
    	
    }
    

    web

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>结婚登记</title>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/css/user/base.css">
        <link rel="stylesheet" href="<%=request.getContextPath()%>/css/user/style.css">
        <link rel="stylesheet" href="<%=request.getContextPath()%>/css/user/swiper-4.3.3.min.css">
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
            <script src="<%=request.getContextPath()%>/js/cityToolsJs.js"></script>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LPq0r285Z9UTAOZTgkWhUs35b5zdpp4F"></script>
    	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/user/swiper-4.3.3.min.css"/>
    </head>
    <body>
    
                <style type="text/css">
                	#map{
                		 600px;
                		height:500px;
                	}
                </style>
    <!-- 头部 -->
     <jsp:include page="../home/header2.jsp"></jsp:include>
    <!-- 主体 -->
    <div class="toolBanner">
            <div class="text luckyDay">
                <h3>结婚登记处查询</h3>
                <div class="textCon">
                        <span>结婚登记处一般接待时间为周一至周五</span>
                <input type="hidden" value="<%=request.getContextPath()%>" id="path">
                </div>
                <div class="dateSelect">
     <select class="" id="province" name="province" onchange="doProvAndCityRelation();">
    			                <option id="choosePro" value="-1">${province}</option>
    			        </select>
                        <select class="" id="citys" name="city" onchange="doCityAndCountyRelation();">
    			         	  <option id='chooseCity' value='-1'>${citys}</option>
    			       </select>
                        <select class="" id="county" name="county">
            				 <option id='chooseCounty' value='-1'>${county}</option>
         				</select>
    
    					
                    <a href="#" id="search">查询</a>
                </div>
            </div>
        </div>
        <div class="marriageRegistration">
            <div class="w">
                <div class="title">婚姻登记处 > ${province}> ${citys}${county}婚姻登记处 </div>
            </div>
        </div>
         <div class="marriageRegistrationDetail">
            <div class="w">
                <h5>${province}${citys}${county}(${citys})</h5>
                <p><span>${province}${citys}${county}婚姻登记处地址:</span> <span id="tosaAddress">${province}${citys}${county}</span> </p>
                <p><span>办公时间:</span> 周一至周五上班,法定节假日除,周一至周五办公时间上午9:00-11:30,下午14:00-17:30</p>
                <p><span>路线交通</span></p>
                <div class="marriageRegistrationDetailH">
                    <a class="cur" href="#" id="bus">公交</a>
                    <a href="#" id="dirver">驾车</a>
                </div>
                <div class="marriageRegistrationDetailB">
                    <ul>
                        <li>
                            <input type="text" id="myaddressCar">
                            至
                            <input type="text" id="toaddressCar" placeholder="${province}${citys}${county}" value="${province}${citys}${county}婚姻登记处">
                            <a href="#" id="searchByCar">查询</a>
                        </li>
                        
                        <li style="display: none">
                            <input type="text">至
                            <input type="text">
                            <a href="http://">查询</a>
                        </li>
                    </ul>
                </div>
                
                <div id="r-result"></div>
        
                <div class="map" id="map">
                
                </div>
                 
            </div>
            
        </div>
    
        <script type="text/javascript">
    
    	var path = $("#path").val();
    	var province  = $("#province option:selected").text();
    	var citys = $("#citys option:selected").text();
    	var county = $("#county option:selected").text();
    	var flag = 1; // 1 公交 2驾车
    
    	$("#province").change(function(){
    		province = $("#province option:selected").text();
    		$("#citys option:selected").text("请选择");
    		$("#county option:selected").text("请选择");
    		$("#search").attr("href",path+"/marr/search?province="+province);
    	})
    	
    	$("#citys").change(function(){
    		citys = $("#citys option:selected").text();
    		$("#county option:selected").text("请选择");
    		$("#search").attr("href",path+"/marr/search?province="+province+"&citys="+citys);
    	})
    	
    	$("#county").change(function(){
    		county = $("#county option:selected").text();
    		$("#search").attr("href",path+"/marr/search?province="+province+"&citys="+citys+"&county="+county);
    	})
    	
    	function scrollToEnd(){//滚动到底部
                var h = $(document).height()-$(window).height();
                $(document).scrollTop(h); 
    	}
    
    	
    	$(function(){
    
    		var array = new Array();  //定义数组 
    	     $("#county option").each(function(){  //遍历所有option
    	          var txt = $(this).text();   //获取option值 
    	          if(txt!=''){
    	               array.push(txt);  //添加到数组中
    	          }
    	     })
    
    			// 百度地图API功能
    		var map = new BMap.Map("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(province+citys+county+"婚姻登记处");
    		
    		
    	})
    	
    	$("#searchByCar").click(function(){
    		scrollToEnd();
    		//公交
    		if(flag == 1){
    			var myaddressCar = $("#myaddressCar").val();//起点
    			var toaddressCar = $("#toaddressCar").val();//终点
    			
    			var map = new BMap.Map("map");
    		    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
    		    map.enableScrollWheelZoom();
    		    var transit = new BMap.TransitRoute(map, {
    				renderOptions: {map: map, panel: "r-result"}, 
    				onResultsHtmlSet : function(){$("#r-result").show()}  	
    		    });
    		    transit.search(myaddressCar,toaddressCar);
    			
    		}
    		
    		//开车
    		if(flag == 2){
    			scrollToEnd();
    			var myaddressCar = $("#myaddressCar").val();//起点
    			var toaddressCar = $("#toaddressCar").val();//终点
    			// 百度地图API功能
    			var map = new BMap.Map("map");
    			map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
    			 var transit = new BMap.DrivingRoute(map, {
    				renderOptions: {
    					map: map,
    					panel: "r-result",
    					enableDragging : true //起终点可进行拖拽
    				},  
    			});
    			transit.search(myaddressCar,toaddressCar);
    		}
    		
    	    
    	    
    	})
    	
    	
    	$("#dirver").click(function(){
    		scrollToEnd();
    		flag = 2;
            $("#bus").removeClass("cur");
            $("#dirver").attr("class","cur");
    	})
    	
    	
    	$("#bus").click(function(){
    		scrollToEnd();
    		$("#dirver").removeClass("cur");
            $("#bus").attr("class","cur");
    		flag = 1;
    	});
    	
    
    </script>   
    <!-- 底部 -->
    <jsp:include page="../home/footer.jsp"></jsp:include>
    </body>
    </html>
  • 相关阅读:
    Redis分布式限流器
    [转] 详解Spring boot启动原理
    [转] 总结了N个真实线上故障
    加一(66)
    原地删除(27)
    旋转数组(189)
    买卖股票的最佳时机 II(122)
    最长公共前缀(14)
    两个数组的交集II(350)
    Django时区及naive datetime object和aware datetime object的区别
  • 原文地址:https://www.cnblogs.com/chengxiaolong/p/10199552.html
Copyright © 2011-2022 走看看