使用百度地图实现发帖时的定位

文章目录
  1. 1. 功能描述
  2. 2. 原理
  3. 3. 代码
    1. 3.1. html
    2. 3.2. js
  4. 4. 源码
  5. 5. 书签

功能描述

在发布帖子界面,用户可以选择是否在发布帖子时显示位置。位置图标默认灰色,不显示位置;用户选择位置后,位置图标变成绿色,同时把位置信息显示在发布帖子界面上。

选择是否显示位置
显示位置

原理

百度地图,提供了四种定位的方式,分别是根据浏览器定位、根据IP定位、根据城市名定位、根据经纬度定位。本功能模块中,采用根据浏览器定位的方式。

浏览器通过js请求百度地图API,获取到地址信息后,发送给我的服务器。

代码

html

引入百度地图api,定义一个id,用来初始化BMap。

1
2
3
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BC46e2b24290dba4d0267e2430f512fe"></script>

<div id="allmap" style="display: none;"></div>

js

新建BMap对象,给一个初始化坐标,然后浏览器通过百度地图API获取到位置信息,获取到位置信息后,和帖子的其他信息一起,发送给服务端。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 百度地图定位
var baidu_position = {};
var map = new BMap.Map("allmap");
var point = new BMap.Point(118.895144,31.92596);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
//alert('您的位置:'+r.point.lng+','+r.point.lat);
console.log(r);
baidu_position = r;
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})

源码

https://github.com/voidking/nodeforum/blob/master/public/js/post/post-add.js

书签

百度地图API
http://developer.baidu.com/map/reference/

百度地图API示例
http://developer.baidu.com/map/jsdemo.htm#d0_2

百度LSB API开发指南
http://developer.baidu.com/map/wiki/index.php?title=uri/api/web

拾取坐标系统
http://api.map.baidu.com/lbsapi/getpoint/index.html

根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
http://www.aichengxu.com/view/2456553

百度地图API详解和运用
http://blog.csdn.net/binyao02123202/article/details/7955803