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

匹诺曹得鼻炎

于 2020-08-20 17:56:49 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WebGIS 文章标签： javascript django 经验分享

本文链接：https://blog.youkuaiyun.com/Try24/article/details/108128219

本文介绍了如何在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=