起点到终点?web地图?我来告诉你!

小伙伴们,做外卖项目的小伙伴,有没有遇到过,web端显示配送路线的小问题呢?今天思梦PHP就给大家带来高德地图,从添加起点到录入终点,做了一个指示路线的小功能!

首先第一步你要去高德或者百度的地图的官网去申请开发者账号,然后创建一个key,当然这里小伙伴要注意的是,高德和百度的经纬度的加密方式不同的,你在程序里面要使用相同的地图开发平台,当然你也可以去转换他们之间的误差,这里就不详细解释了!

第二步就是开始去整合了!代码呈上:

这些js引入代码小伙伴们一定不要忘记~

以上就是怎么获取经纬度的问题,下面就开始告诉大家怎么显示在web上出现下面的效果

首先呢我们通过一个url去获取经纬度

获取经纬度然后传给前台以供前台调用展示:

同样也要引入高德的一些必备的样式和js

然后呢通过js获取之后赋值给高德的js

这样就结束了,路线规划也就显示了!

效果呢是这样的:

原文发布于微信公众号 - 思梦PHP(sm_php)

原文发表时间:2016-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏令仔很忙

AJAX--XMLHttpRequest五步使用法

      多数Web应用程序都使用请求/响应模型从服务器上获得完整的HTML页面。常常是点击一个按钮,等待服务器相应,在点击另一个按钮,然后在等待,这样一个反...

712
来自专栏WebDeveloper

认识css3伪元素

css2的规定为单冒号表示,而css3已经明确表示伪类使用单冒号,伪元素使用双冒号,本次所有测试双冒号

795
来自专栏木头编程 - moTzxx

微信 {“errcode“: -1000}

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

673
来自专栏smy

document.ready 与 window.onload的区别

document的ready事件通常会比window的onload事件先发生,为什么呢? 因为document的ready是在浏览器加载解析并构建完doc文档模...

41613
来自专栏一“技”之长

iOS8新特性扩展(Extension)应用之二——分享插件

        在上一篇博客中,介绍了iOS8新特性扩展功能之一的Today功能:http://my.oschina.net/u/2340880/blog/48...

712
来自专栏iOS开发攻城狮的集散地

UIPageViewController电子书翻页效果

1599
来自专栏向治洪

React Native ios开发第一课

前言 本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么...

1908
来自专栏木头编程 - moTzxx

TP5 验证码功能实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

812
来自专栏DeveWork

WordPress 根据浏览器 user-agent 按需加载CSS 文件

在进行前端开发的时候,为了兼容性,比如hack 那个讨厌的IE 浏览器,我们常常需要<!--[if IE X]>这类IE 判断代码来实现hack 的效果。而在W...

1768
来自专栏编程

爬虫基本原理完全梳理及常用解析方式

什么是爬虫:即网络爬虫,可以理解为在网络上爬行的一只蜘蛛,互联网可以比喻为一张大网,一只蜘蛛在爬行时遇到了所需的资源就可以把它爬取下来。简单来说,爬虫就是请求网...

1727

扫码关注云+社区