我需要实现html文件中读取txt中经纬度数据,然后调用百度地图的api,将得到的这两个点之间的距离写到txt文件中

chaRon522 2020-01-02 11:52:44
本人大二学生在做期末设计,需要实现在HTML中读取文件数据,但还没学过js,请教下函数该怎么调用。search是百度地图提供的计算两点间的距离的方法,但需要将经纬度坐标传到search函数中。我想的是html直接将已经保存好的文件中的经纬度读出来存到变量中,然后作为方法search的形参,最后将计算得到的距离再存到新的文件中。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}

</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CSHY7cqPUt89ltPGNc7LK7wjG4qutlfB"></script>
<title>地图展示</title>
</head>

<body>
<div id="allmap"></div>
</body>

</html>

<!-- <script src = "baiduTileslnfo.js"></script> -->
<script src="qwebchannel.js"></script>
<!--JS通过该程序识别QT中的程序-->


<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap", {
enableMapClick: false
}); // 创建Map实例,关闭底图可点功能
map.centerAndZoom(new BMap.Point(106.54, 29.510), 12); // 初始化地图,设置中心点坐标和地图级别

var myStyleJson = [{
"featureType": "poilabel",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "districtlabel",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
];
map.setMapStyle({
styleJson: myStyleJson
});

map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放
// map.disableDragging();
map.enableDragging();


var geoc = new BMap.Geocoder();



// 设置路口坐标
var point1 = new BMap.Point(106.564146, 29.62711);
var point2 = new BMap.Point(106.446864, 29.519303);
var point3 = new BMap.Point(106.612727, 29.590434);
var point4 = new BMap.Point(106.602953, 29.392249);
var point5 = new BMap.Point(106.654696, 29.344405);
var point6 = new BMap.Point(106.578807, 29.29553);
var point7 = new BMap.Point(106.74582, 29.542684);
var point8 = new BMap.Point(106.616176, 29.633892);
var point9 = new BMap.Point(106.307734, 29.47001);
var point10 = new BMap.Point(106.312333, 29.643183);
var point11 = new BMap.Point(106.342229, 29.24764);
var point12 = new BMap.Point(106.796412, 29.639668);
var point13 = new BMap.Point(106.928643, 29.619575);

var marker1 = new BMap.Marker(point1); //创建标注
var marker2 = new BMap.Marker(point2);
var marker3 = new BMap.Marker(point3);
var marker4 = new BMap.Marker(point4);
var marker5 = new BMap.Marker(point5);
var marker6 = new BMap.Marker(point6);
var marker7 = new BMap.Marker(point7);
var marker8 = new BMap.Marker(point8);
var marker9 = new BMap.Marker(point9);
var marker10 = new BMap.Marker(point10);
var marker11 = new BMap.Marker(point11);
var marker12 = new BMap.Marker(point12);
var marker13 = new BMap.Marker(point13);
map.addOverlay(marker1); //将标注添加到地图
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addOverlay(marker6);
map.addOverlay(marker7);
map.addOverlay(marker8);
map.addOverlay(marker9);
map.addOverlay(marker10);
map.addOverlay(marker11);
map.addOverlay(marker12);
map.addOverlay(marker13);

//根据起终点经纬度查询驾车路线


//计算驾车距离和时间
var output = "驾车需要";
var searchComplete = function(results) {
if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
return;
}
var plan = results.getPlan(0);
// output += plan.getDuration(true) + "\n"; //获取时间
// output += "总路程为:";
output += plan.getDistance(true) + "\n"; //获取距离
}
var transit = new BMap.DrivingRoute(map, {
renderOptions: {
map: map
},
onSearchComplete: searchComplete
// ,
// onPolylinesSet: function() {
// setTimeout(function() {
// alert(output)
// }, "1000"
});
// }
// }
// );

var point91 = new BMap.Point();
var point92 = new BMap.Point();
bridgeforJS.readFile(point91, point92);
transit.search(point91, point92);
bridgeforJS.getDistance(output);


map.addEventListener("click", function(e) {
var pt = e.point;
// alert(e.point.lng + "," + e.point.lat);
bridgeforJS.getCoordinate(e.point.lng, e.point.lat);
var point1 = new BMap.Point(pt.lng, pt.lat);
var maker = new BMap.Marker(point1);
map.addOverlay(maker);
});

var menu = new BMap.ContextMenu();
var txtMenuItem = [{
text: '放大',
callback: function() {
map.zoomIn()
}
},
{
text: '缩小',
callback: function() {
map.zoomOut()
}
},
{
text: '增加事故发生点',
callback: function() {
bridgeforJS.createAccidentPoint();
map.addEventListener("click", function(e) {
// alert(e.point.lng + "," + e.point.lat);

// bridgeforJS.getLat(e.point.lat);
// bridgeforJS.getLng(e.point.lng);
// mainwindow.bridgeforJS.getCoordinate(e.point.lng, e.point.lat);
})
}
}
];


for (var i = 0; i < txtMenuItem.length; i++) {
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
}
map.addContextMenu(menu);

// QT交互*********************************************
new QWebChannel(qt.webChannelTransport, function(channel) {
window.bridgeforJS = channel.objects.bridgeName; //bridgeName 与QT 中一致

});

// 成功!

</script>
<!---->


我查了一下,好像需要在js定义函数,然后在html中调用,但实在是没找到方法。最后两个函数是我在网上查找到的读写文件的函数,我直接添到了js中,但不知道怎么在html中调用,请大佬教教我
function readFile(filename){
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile(filename,1);
var s = "";
while (!f.AtEndOfStream)
s += f.ReadLine()+"\n";
f.Close();
return s;
}

function writeFile(filename,filecontent){
var fso, f, s ;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.OpenTextFile(filename,8,true);
f.WriteLine(filecontent);
f.Close();
alert('ok');
}

...全文
320 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
chaRon522 2020-01-02
  • 打赏
  • 举报
回复
引用 1 楼 God_E 的回复:
不明白你要做成什么样子 百度地图开放平台里面有百度地图名片和百度地图生成器 比较实用一般常用的需求都会有
就是现在txt文件中已经有了一对经纬度坐标,然后百度地图提供的api里面,他需要知道这两个经纬度,当做形参才能计算这两个点之间的距离。所以我就想用网页把txt文件中的数据读出来,然后传递给百度api的形参。简单说就是这样,后面的我自己会做
God_E 2020-01-02
  • 打赏
  • 举报
回复
不明白你要做成什么样子 百度地图开放平台里面有百度地图名片和百度地图生成器 比较实用一般常用的需求都会有
weixin_45804046 2020-01-02
  • 打赏
  • 举报
回复
同意3楼意见。要么上传txt,要么本地hta直接读取,html读取txt困难重重。
chaRon522 2020-01-02
  • 打赏
  • 举报
回复
引用 3 楼 JiexC0la 的回复:
现在浏览器不允许直接读取本地资源,我觉得你首先要做个input type=file的上传按钮上传本地txt,然后通过FileReader的readAsText()方法读取内容,然后处理你读取的内容传给api调用
嗯好,我试试
JiexC0la 2020-01-02
  • 打赏
  • 举报
回复
现在浏览器不允许直接读取本地资源,我觉得你首先要做个input type=file的上传按钮上传本地txt,然后通过FileReader的readAsText()方法读取内容,然后处理你读取的内容传给api调用

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧