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>
  • 相关阅读:
    107. Binary Tree Level Order Traversal II
    108. Convert Sorted Array to Binary Search Tree
    111. Minimum Depth of Binary Tree
    49. Group Anagrams
    使用MALTAB标定实践记录
    442. Find All Duplicates in an Array
    522. Longest Uncommon Subsequence II
    354. Russian Doll Envelopes
    opencv 小任务3 灰度直方图
    opencv 小任务2 灰度
  • 原文地址:https://www.cnblogs.com/chengxiaolong/p/10199552.html
Copyright © 2011-2022 走看看