web开发 基于高德JS服务API的使用demo 包括 景点推荐 附近周边搜索 路线规划 定位服务等功能的综合使用

文章目录

  • 选择
  • 使用
  • 结语

选择

  • 平台选择

最近接触到一个比赛项目 要做类似于 旅游路线和景点推荐的地图 出于第一次接触, 立刻向度娘求助 求助当前各地平台的API 的使用, 最终敲定了高德地图 理由很简单 当前所有API教程中高德无疑上手难度最小

  • API选择
    web开发 基于高德JS服务API的使用demo 包括 景点推荐 附近周边搜索 路线规划 定位服务等功能的综合使用_第1张图片刚开始在官网繁多的API的选择上 我有点不知所措, 后来经过笔者的验证 初学者 只需要上面我标注的三个接口即可 (我说的是web端开发需求)

    • 地图 JS API
      基本必用, 这里面包含了所有你可能用的基本功能demo,它更侧重于地图服务相关功能的展示, 以及样例代码的提供

    • web服务API
      纯接口形式, 即就是上面地图 JS API的所使用的API接口调用介绍, 它可以为你的应用提供更灵活的设计 比如你对上面API请求的地图的数据 需要自定义结果实现时, 可以自己手动传参并接收结果.

    • URI API
      快速开发, 它时完全基于URI的形式服务, 如果你的平台不需要自己植入地图, 而是仅仅需要使用地图某些功能 直接用它你会非常的舒服, 几乎不需要多少前端代码

注:这三种API提供的服务从功能上完全一致, 仅仅是使用场景的需求差异,


使用

注:
1.这里我就不再啰嗦原理, 官网都说的很明白, 我这里只展示相关功能截图 以及误区介绍
2.样例代码 需要手动关注后 联系我我会直接发给你

  • 定位服务
    web开发 基于高德JS服务API的使用demo 包括 景点推荐 附近周边搜索 路线规划 定位服务等功能的综合使用_第2张图片

误区介绍
1.定位服务测试最好先去IE测试, 基本都是没问题, 而Chrome失败率极高, 目前暂时找不到愿意

  • 自动输入提示

web开发 基于高德JS服务API的使用demo 包括 景点推荐 附近周边搜索 路线规划 定位服务等功能的综合使用_第3张图片

web开发 基于高德JS服务API的使用demo 包括 景点推荐 附近周边搜索 路线规划 定位服务等功能的综合使用_第4张图片

通过键盘响应直接获得相关输入提示, 同时选中某条记录后进行对目标数据搜索景点信息 这里我自定义了展示演示

  • 路线规划

web开发 基于高德JS服务API的使用demo 包括 景点推荐 附近周边搜索 路线规划 定位服务等功能的综合使用_第5张图片
web开发 基于高德JS服务API的使用demo 包括 景点推荐 附近周边搜索 路线规划 定位服务等功能的综合使用_第6张图片

值得一提的是 这个我是根据高德自定义样式实现, 同时为了扩展需要 还添加了几种交通出行方式, 其中自驾 公交 自行车数据来源于高德, 火车 飞机数据 来源第三方付费API


结语

地图API繁多而杂, 建议初学者 不要全部文档都看 而是着重根据你的意图 去看相关文档 这样会省事很多.

你可能感兴趣的:(地图API,高德API)