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

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

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

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

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

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

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

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

5a0b3ebaaee0d43d047307d545bd028f.png

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

b16792774af8de98007bd302c8763459.png

他的位置取到的是这里

91be9734e37f0b55c62fb7972fade172.png

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

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

60d32be1cf2a3c265799e9dc0d2e0208.png

点击标注

b035f78ce660d7cbd13407ba61c7ce61.png

会转到百度地图

点击标识

176266e10195265b0799dffd3bea4847.png

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

看一下数据库

bf03eb6c619864011de067a6a6836cda.png

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

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

ea62a095ddfdd18b6dd1d2afa1defc16.png

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

91ce7f124eaa43b8e1aed6fa63927b34.png

都可以出现里面的内容

然后再来看后台页面

5449ff03df4c0a865fcda4f5b19c39e6.png

可以对其进行修改,删除

点击修改

4c6d20fe604578341616028e0f91a298.png

后面加了333,点击修改

3f5bb5bff4006348b7ab1215898cb55b.png

修改成功

具体就是这么一个操作

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

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

进入后就是这样的

60539b6272136dde9fb81ca726a3487f.png

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

bad054ccba7136ecb6e17bbdcbd0bda9.png

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

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

9cc0ba251593cd71e868cc1cbc13e05c.png

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

然后再打开一开始的窗口

44e7bfed9118d8a8e30fd6003dc3f1e6.png

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

然后就到达了这个页面

da08b7dca5b173a026b08e07523091ae.png

可以参考着这个来写

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

f661fee28c819dab021f107522a5feb7.png

54fa1c74225e9d4326cc599ed981abc8.png

下面展示一下我的源代码把

前台添加页代码部分

无标题文档

p{margin-left:5px;font-size:14px;}#r1{width:100%;max-width:1300px;height:500px;text-align:center; }#r2{width:100%;max-width:1300px;height:50px;text-align:center; }#r3{color:#999}

标注您当前位置,并添加信息

地   址:
经纬度:
标   题:
电   话:

注:地址和经纬度取您的实时位置,标注后会显示百度地图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值