百度地图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{
width: 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>
