Commit cc2e2149 authored by liyuanhong's avatar liyuanhong

增加了测距工具

parent 6061e9cc
{"time": {"dateTime": "2020-07-29 11:26:33", "date": "2020-07-29", "time": "11:26:33"}, "curDayTravel": {"todayTotalMilleage": 3158, "todayTotalOil": 203, "todayTotalTime": 197, "theMilleage": 3158, "theOil": 203, "theTime": 197}, "travelData": {"totalMilleage": 126685, "totalOil": 11123, "totalTime": 7775}}
\ No newline at end of file
{"time": {"dateTime": "2020-07-30 10:17:57", "date": "2020-07-30", "time": "10:17:57"}, "curDayTravel": {"todayTotalMilleage": 2981, "todayTotalOil": 206, "todayTotalTime": 185, "theMilleage": 2981, "theOil": 206, "theTime": 185}, "travelData": {"totalMilleage": 129666, "totalOil": 11329, "totalTime": 7960}}
\ No newline at end of file
{"time": {"dateTime": "2020-07-29 12:19:19", "date": "2020-07-29", "time": "12:19:19"}, "curDayTravel": {"todayTotalMilleage": 7938, "todayTotalOil": 513, "todayTotalTime": 495, "theMilleage": 656, "theOil": 41, "theTime": 41}, "travelData": {"totalMilleage": 630382, "totalOil": 55702, "totalTime": 37968}, "event": {"threeRapid": {"totalRapidlyAccelerate": 53, "totalSharpSlowdown": 42, "totalSharpTurn": 44}}}
\ No newline at end of file
{"time": {"dateTime": "2020-07-30 10:05:57", "date": "2020-07-30", "time": "10:05:57"}, "curDayTravel": {"todayTotalMilleage": 4454, "todayTotalOil": 284, "todayTotalTime": 278, "theMilleage": 3075, "theOil": 195, "theTime": 192}, "travelData": {"totalMilleage": 638772, "totalOil": 56232, "totalTime": 38492}, "event": {"threeRapid": {"totalRapidlyAccelerate": 55, "totalSharpSlowdown": 44, "totalSharpTurn": 46}}}
\ No newline at end of file
......@@ -3,7 +3,7 @@
{% block content_01 %}
<script src="../../static/js/messageTools/setting.js"></script>
<script src="../../static/js/coordtransform.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d96c8dc7e0d6c636d65e6f6d75b0ccb4"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d96c8dc7e0d6c636d65e6f6d75b0ccb4&plugin=AMap.Geocoder&plugin=AMap.RangingTool"></script>
<style>
.nav-pills li {
margin-bottom:5px;
......@@ -39,23 +39,30 @@
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group" style="width:400px;height:35px;background:pink;z-index:50;position:absolute;top:120px;right:40px;border-radius:5px;">
<a href="#" class="btn btn-default" role="button" id="ctrArea1" onclick="ctrAreaShow(this)">轨迹点查询</a>
<a href="#" class="btn btn-default" role="button" id="ctrArea2" onclick="ctrAreaShow(this)">录制轨迹</a>
<a href="#" class="btn btn-default" role="button" id="ctrArea3" onclick="ctrAreaShow(this)">查询轨迹</a>
<a href="#" class="btn btn-default" role="button" id="ctrArea2" onclick="ctrAreaShow(this)">轨迹工具</a>
<a href="#" class="btn btn-default" role="button" id="ctrArea3" onclick="ctrAreaShow(this)">其他工具</a>
</div>
<div id="ctrArea_1" style="width:400px;height:120px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
<div id="ctrArea_1" style="width:400px;height:175px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
<div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
<label>经 ,纬 度 :</label><input id="toLngLat" type="text" class="form-control" value="106.54041,29.40268" style="width:200px;">
<button type="button" class="btn btn-default" onclick="setposition()">定位</button>
<h5>地址:<p style="display:inline;" id="toLngLatInfo"></p></h5>
</div>
<div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
<label>当前经纬度:</label><input id="curLngLat" type="text" class="form-control" value="106.587436,29.565099" style="width:200px;"> <label style="font-size:10px;">点击地图自动获取</label>
<h5>地址:<p style="display:inline;" id="curLngLatInfo"></p></h5>
</div>
</div>
<div id="ctrArea_2" style="width:400px;height:250px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
222
<p>支持录制轨迹和回放轨迹(功能待开发)</p>
</div>
<div id="ctrArea_3" style="width:400px;height:250px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
333
<div id="ctrArea_3" style="width:400px;height:60px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
<div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
<label>测距:</label>
<button type="button" class="btn btn-default" onclick="distance()">开始测距</button>
<button type="button" class="btn btn-default" onclick="undistance()">停止测距</button>
<label id="distanceTxt" style="color:red;">未测距</label>
</div>
</div>
<div id="container" style="width:100%; height: 750px;">
......@@ -65,17 +72,25 @@
<script>
var map = null;
var map = undefined;
var curShow = "";
//控制点击地图的触发事件
//控制点击地图的触发事件 0:默认 1:测距
var clickType = 0;
//获取经纬度地址信息类
var geocoder = undefined;
var marker = undefined; //单个点标记
//测距样式
var ruler1 = undefined;
//加载地图
(function(){
map = new AMap.Map('container', {
zoom:13,//级别
center: [106.587436, 29.565099]
});
//初始化获取距离工具
geocoder = new AMap.Geocoder({});
//初始化测距工具
ruler1 = new AMap.RangingTool(map);
})();
//处理地图点击事件
map.on('click', function(ev) {
......@@ -86,17 +101,28 @@
var rawGps = coordtransform.gcj02towgs84(parseFloat(lnglat["lng"]), parseFloat(lnglat["lat"]));
var lnglattxtraw = rawGps[0].toFixed(6) + "," + rawGps[1].toFixed(6);
$("#curLngLat").val(lnglattxtraw);
if(marker != undefined){
map.remove(marker);
}
var theGps = lnglattxt.split(",")
marker = new AMap.Marker({
position: new AMap.LngLat(theGps[0],theGps[1]), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
//position: new AMap.LngLat(rawGps[0],rawGps[1]), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: '定位'
});
map.add(marker);
//显示经纬度地址信息
geocoder.getAddress(theGps, function(status, result) {
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
$("#curLngLatInfo").text(address);
$("#toLngLatInfo").text("");
}else{
log.error('根据经纬度查询地址失败');
}
});
}
if(marker != undefined){
map.remove(marker);
}
var theGps = lnglattxt.split(",")
marker = new AMap.Marker({
position: new AMap.LngLat(theGps[0],theGps[1]), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
//position: new AMap.LngLat(rawGps[0],rawGps[1]), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: '定位'
});
map.add(marker);
});
function ctrAreaShow(e){
var cliId = $(e).attr("id");
......@@ -151,9 +177,31 @@
});
map.setCenter(theGps);
map.add(marker);
//显示经纬度地址信息
geocoder.getAddress(cvtGps, function(status, result) {
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
$("#toLngLatInfo").text(address);
}else{
log.error('根据经纬度查询地址失败');
}
});
}
});
}
//测距
function distance(){
clickType = 1;
ruler1.turnOn();
$("#distanceTxt").text("测距中");
}
//取消测距
function undistance(){
clickType = 0;
ruler1.turnOff();
$("#distanceTxt").text("未测距");
}
</script>
{% endblock %}
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment