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

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

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

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

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

 

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

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

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

他的位置取到的是这里

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

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

点击标注

会转到百度地图

点击标识

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

看一下数据库

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

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

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

都可以出现里面的内容

然后再来看后台页面

可以对其进行修改，删除

点击修改

后面加了333，点击修改

修改成功

具体就是这么一个操作

做的时候只需要参考一个网址就可以?title=jspopular&qq-pf-to=pcqq.c2c

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

进入后就是这样的

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

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

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

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

然后再打开一开始的窗口

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

然后就到达了这个页面

可以参考着这个来写

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

 

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

前台添加页代码部分

无标题文档 p #r1 #r2 #r3标注您当前位置，并添加信息地经纬度：标电注：地址和经纬度取您的实时位置,标注后会显示百度地图 BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ BMAP_STATUS_SUCCESS){ r.point.lat); ); BMap.Point(r.point.lng,r.point.lat); map.centerAndZoom(point,12); BMap.Geocoder(); geoc.getLocation(point, function(rs){ rs.addressComponents; addComp.streetNumber); }); } else { alert(.getStatus()); } },{enableHighAccuracy: true})

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

运行起来就是这样的

 

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

 然后再来写添加的处理页面