前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加信息标注

调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加信息标注

作者头像
逸鹏
发布2018-04-11 15:07:50
1.3K0
发布2018-04-11 15:07:50
举报
文章被收录于专栏:逸鹏说道

前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现。

下面我先说一下主要实现的功能,和要实现的页面

这个小项目分为前台和后台

前台需要两个页面,第一个页面是一打开就可以获得自己的实时位置,显示当前位置与当前的经纬度,这两项是自动获取的,还有标题和电话是可以自己添加的,点击添加,就是到达百度地图的页面,你刚刚添加的东西就会在这个地图上显示,形成一个标注,点击标注,里面显示的就是刚刚你添加的标题和电话。

后台就是显示你添加的那些信息,也就是说你在添加的时候,就已经把他存入数据库了,你可以通过后台来修改他的标题和电话,其他两项不可改,或是可以直接删除,删除的话,地图上的小标注也会消失。

功能差不多就是这些,当时写的时候,没有具体的讲清楚饶了很多弯路,当真正理清楚了反而觉得没有那么难了,不过确实也没有学过,感觉好多东西都是遇到了才边学边会做

废话不多说了,先来看一下效果吧

因为要手机也可以用,所以做的响应式的

他的位置取到的是这里

这个定位很不准确,有时取到的位置是对的,有时候会有偏差

下面再来给他添加标题和电话

点击标注

会转到百度地图

点击标识

会弹出刚才我们输入的内容

看一下数据库

刚才添加的那条也进了数据库

还有其他两个地点。我们从地图上找一下

另外两个标在这里,点击标识

都可以出现里面的内容

然后再来看后台页面

可以对其进行修改,删除

点击修改

后面加了333,点击修改

修改成功

具体就是这么一个操作

做的时候只需要参考一个网址就可以http://lbsyun.baidu.com/index.php?title=jspopular&qq-pf-to=pcqq.c2c

这个网址是关于百度地图操作的

进入后就是这样的

调接口前首先要点击获取秘钥,没有登录百度账号的,首先会让你登录,登陆后会出现一个这样的页面

你可以创建应用,内容可以随便填

创建了之后就会出现你创建好的应用

那个AK就是百度地图接口的秘钥

然后再打开一开始的窗口

功能介绍里面的小功能随便点进一个

然后就到达了这个页面

可以参考着这个来写

做这个小项目需要一个数据库,数据库如下

这里的思路是这样的,先找到自己实时的经纬度,然后再根据经纬度转换为实时地址名

运行起来就是这样的

可能要等一小会,才会拾取到你的位置

代码可以查看原文链接,PHP为后端处理语言,其他语言可以逆推的

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-04-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 我为Net狂 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档