基于WebGIS使用高德JS API实现自定义路径规划

本文介绍了如何在Django项目中结合WebGIS,利用高德JS API实现前端输入经纬度或地名进行路径规划。通过在HTML中设置input字段和onclick函数,处理坐标数据,实现地图上的路径显示。同时,讨论了逻辑判断以确定搜索类型,并分享了细节完善和API链接,展示了最终效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在项目中我们可能会用到直接在网页前端输入经纬度坐标或地名来规划路径,当然,规划路径这块高德已经做好了,下面主要是实现如何在前端输入字段达到显示路径目的,
首先,看下我的网页前端效果:
前端效果
注释:这里为什么要把经纬度分开呢,主要还是因为之前的方法,更好的让坐标数组化,方便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 class=
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值