百度地图
程序员文章站
2022-06-10 13:07:47
...
1、jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>还车系统</title>
<%@include file="/WEB-INF/views/header.jsp"%>
<%--引入js--%>
<script src="/static/js/model/settedmap/settedmap.js"></script>
<%--百度地图--%>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=CkMtoGnveHNnuaoiqkV4MRnGIH3Fp151"></script>
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<%--datagrid--%>
<table id="settedMapDatagrid"></table>
<%--页面的按钮--%>
<div id="datagridToolbar">
<form id="searchForm">
<a href="javascript:;" data-method="setted" onclick="showmap()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">还车线路地址</a>
</form>
</div>
<%--百度地图弹出框--%>
<div id="mapDialog" class="easyui-dialog" title="还车路线" style="width:1000px;height: 600px"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed: true">
<%--百度地图id--%>
<div id="container"></div>
</div>
<script type="text/javascript">
//绑定一个点击事件，解决打开地图时定位到大西洋（定位不准确）的情况
function showmap() {
//获取选中的一行地址
var row =$("#settedMapDatagrid").datagrid("getSelected");
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
var pointdata=null; //定义一个临时变量（用于动态获取到终点位置）
//把获取到的一行数据中的地址进行解析，得到的是经纬度
myGeo.getPoint(row.address, function(point){
pointdata=point;
}, "成都");
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(104.06218641571,30.593691247414); // 创建点坐标:成都的
map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
//鼠标事件
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
//根据浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
//驾车路线
var myP1 = new BMap.Point(r.point.lng,r.point.lat); //起点
var myP2 = new BMap.Point(pointdata.lng,pointdata.lat); //终点
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //驾车实例
driving2.search(myP1, myP2); //显示一条公交线路
window.run = function (){
var driving = new BMap.DrivingRoute(map); //驾车实例
driving.search(myP1, myP2);
driving.setSearchCompleteCallback(function(){
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
var paths = pts.length; //获得有几个点
var carMk = new BMap.Marker(pts[0],{icon:myIcon});
map.addOverlay(carMk);
i=0;
function resetMkPoint(i){
carMk.setPosition(pts[i]);
if(i < paths){
setTimeout(function(){
i++;
resetMkPoint(i);
},100);
}
}
setTimeout(function(){
resetMkPoint(5);
},100)
});
};
setTimeout(function(){
run();
},1500);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
}
</script>
</body>
</html>
2、js页面
$(function () {
//获取到组件
var settedMapDatagrid=$("#settedMapDatagrid");
//地图的弹出框
var mapDialog = $("#mapDialog");
itsource={
setted(){
var row = settedMapDatagrid.datagrid("getSelected");
if(row){
mapDialog.dialog("open").dialog("center");
}else {
$.messager.alert('警告','<h1><span style="color: magenta">陛下请翻牌选臣妾嘛</span></h1>');
}
}
};
//绑定事件
$("[data-method]").click(function () {
var method = $(this).data("method");
itsource[method]();
});
//界面渲染
settedMapDatagrid.datagrid({
url:'/settedMap/page',
fit:true,
singleSelect:true,
pagination:true,
fitColumns:true,
toolbar:'#datagridToolbar',
columns:[[
{field:'custormerId',title:'客户名称',width:100},
{field:'settedTime',title:'结算时间',width:100},
{field:'amountId',title:'应付金额',width:100},
{field:'totalMoney',title:'总金额',width:100},
{field:'payId',title:'支付方式',formatter:formatterStatus,width:100},
{field:'address',title:'地址',width:100},
]]
});
});
下一篇： C++：避免结构体重复定义的方法