在项目中我们可能会用到直接在网页前端输入经纬度坐标或地名来规划路径,当然,规划路径这块高德已经做好了,下面主要是实现如何在前端输入字段达到显示路径目的,
首先,看下我的网页前端效果:
注释:这里为什么要把经纬度分开呢,主要还是因为之前的方法,更好的让坐标数组化,方便JS识别,详情可见上篇博客:
Django中引用高德JS API并实现数据库存放后台的一种思路
1.我们先写好html中的代码,最开始我用的Form表单,提交后老是自动刷新,获取值变得尤为困难,后面改成一般的input之后问题得以解决,我这里用的是Semantic UI框架,详情可见官网Semantic UI-中文教程
<div class="ui cards">
<div class="card">
<label class="ui label"><h4>经纬度或地名搜索</h4></label>
<div class="ui labeled input">
<div class="ui label">
起点经度
</div>
<input id="aa" type="text" name="first-name" placeholder="经度">
</div>
<div class="ui labeled input">
<div class="ui label">
起点纬度
</div>
<input id="bb" type="text" name="first-name" placeholder="纬度">
</div>
<div class="ui labeled input">
<div