百度地图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>
原文地址:https://www.cnblogs.com/chengxiaolong/p/10199552.html