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

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

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

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

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

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

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

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

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

他的位置取到的是这里

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

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

点击标注

会转到百度地图

点击标识

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

看一下数据库

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

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

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

都可以出现里面的内容

然后再来看后台页面

可以对其进行修改,删除

点击修改

后面加了333,点击修改

修改成功

具体就是这么一个操作

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

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

进入后就是这样的

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

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

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

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

然后再打开一开始的窗口

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

然后就到达了这个页面

可以参考着这个来写

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

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

运行起来就是这样的

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

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

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2017-04-18

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

小程序中点击按钮跳转另外一个小程序

有很多时候,推广业务需要,会在一个小程序之中绑定另外一个小程序,形成小程序内部之间的生态系统,不但可以满足用户更多需求,增强小程序用户粘性,还可以有利于小程序大...

1.4K20
来自专栏Samego开发资源

Linux之ps进程查看命令

27350
来自专栏Youngxj

Emlog后台编辑器工具栏表情OwO

19240
来自专栏非著名程序员

可能是 Android 平台上最快的图片压缩框架

这款图片压缩框架,是 ghnor 作者在 Luban 的算法策略上,丰富了外围的 api,提供更多的可配参数,多线程压缩和不同细粒度的任务控制。 它不仅可以同步...

258100
来自专栏AndroidTv

系统应用集成过程中的一些坑背景知识点正文埋坑后记参考资料

埋这些坑的最初来源是由于测试人员在集成新终端设备时提了个 bug: app 在这个设备上无法启动。

17320
来自专栏程序员互动联盟

浏览器开发系列第三篇:chromium代码目录结构

上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流。 另外...

65570
来自专栏mukekeheart的iOS之旅

Android基础总结(1)

1、Android开发的特点 四大组件:活动(Activity)、服务(Service)、广播接收器(Broadcast Receiver)、内容提供器(Con...

294100
来自专栏Java进阶架构师

闪电侠:2018.3 IntelliJ IDEA 重大更新:支持CPU火焰图,新增酷炫主题

就在上周,JetBrain 公司发布了 Java 集成开发环境 IntelliJ IDEA 最新版本 2018.3Beta,本篇文章,我将根据官方博客以及自己的...

14710
来自专栏开源优测

AutoMagic使用说明

自动化测试管理平台,可以进行用户、产品、项目、模块、测试用例、测试元素、测试关键字、测试报告的管理等。

10410
来自专栏编程

使用GitHub搭建个人博客

今年使用GitHub搭建了自己的博客:kaze2017.com 我整理了一下搭建博客的过程,分为购买域名、准备环境、Git和GitHub、搭建博客、绑定域名、感...

331100

扫码关注云+社区

领取腾讯云代金券