这两天在看在移动端通过浏览器获取地理位置的相关方法,顺便深入了解一下百度地图API的相关功能。
测试实例包含了以下功能:
(1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实际位置不一致的情况)
(2)通过移动端浏览器及GPS定位位置坐标
(3)根据位置坐标转换百度地图坐标
(4)根据位置坐标逆推城市具体地址功能(存在一定误差)
(5)通过使用百度API展示地理位置及添加标注功能
<!DOCTYPE html>
<html>
<head>
<
Meta charset="utf-8">
<
title>地理位置测试</
title>
<script type="text/javascript" src="
http://api.map
.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="
http://api.map
.baidu.com/api?v=2.0&
ak=您的密钥"></script>
<script type="text/javascript">
var map;
var gpsPoint;
var baiduPoint;
var gpsAddress;
var baiduAddress;
function get
LOCATIOn()
{
//根据IP
获取城市
var myCity = new BMap.LocalCity(
);
myCity.get(getCityByI
p);
//
获取GPS坐标
if (navigator.geo
LOCATIOn)
{
navigator.geo
LOCATIOn.getCurrentPosition(showMap,handleError,
{ enableHighAccuracy: true,maximumAge: 1000 }
);
} else
{
alert("您的浏览器
不支持使用HTML 5来
获取地理位置服务"
);
}
}
function showMap(
value) {
var longitude = value.coord
s.longitude;
var latitude = value.coord
s.latitude;
map = new BMap.Map("map"
);
//alert("坐标经度为:" + latitude + ", 纬度为:" + longitude
);
gpsPoint = new BMa
p.point(longitude,latitud
E); // 创建点坐标
map.centerAndZoom(gpsPoint,15
);
//根据坐标逆解析地址
var geoc = new BMap.Geocoder(
);
geoc.get
LOCATIOn(gpsPoint,getCityByCoordinat
E);
BMap.Convertor.translate(gpsPoint,translateCall
BACk
);
}
translateCall
BACk = function (po
int) {
baiduPoint = point;
var geoc = new BMap.Geocoder(
);
geoc.get
LOCATIOn(baiduPoint,getCityByBaiduCoordinat
E);
}
function getCityByCoordinate(rs)
{
gpsAddress = r
s.addressComponents;
var address = "GPS标注:" + gpsAddres
s.province + "," + gpsAddres
s.city + "," + gpsAddres
s.di
Strict + "," + gpsAddres
s.street + "," + gpsAddres
s.street
number;
var marker = new BMap.Marker(gpsPo
int); // 创建标注
map.addOverlay(marker
); // 将标注
添加到地图中
var labelgps = new BMap.Label(address,
{ offset: new BMap.Size(20,-10) }
);
marker.setLabel(labelgps
); //
添加GPS标注
}
function getCityByBaiduCoordinate(rs)
{
baiduAddress = r
s.addressComponents;
var address = "
百度标注:" + baiduAddres
s.province + "," + baiduAddres
s.city + "," + baiduAddres
s.di
Strict + "," + baiduAddres
s.street + "," + baiduAddres
s.street
number;
var marker = new BMap.Marker(baiduPo
int); // 创建标注
map.addOverlay(marker
); // 将标注
添加到地图中
var labelbaidu = new BMap.Label(address,-10) }
);
marker.setLabel(labelbaidu
); //
添加百度标注
}
//根据IP
获取城市
function getCityByIP(rs)
{
var cityName = r
s.name;
alert("根据IP定位您所在的城市为:" + city
Name);
}
function handleError(
value) {
switch (value.cod
E) {
case 1:
alert("位置服务被拒绝"
);
break;
case 2:
alert("暂时
获取不到位置信息"
);
break;
case 3:
alert("
获取信息超时"
);
break;
case 4:
alert("未知
错误"
);
break;
}
}
function init()
{
get
LOCATIOn(
);
}
window
.onload = init;
</script>
</head>
<body>
<div id="map" style="width:600px;height:600px;"></div>
</body>
</html>
问题 :
通过浏览器或是GPS获取 会有位置偏移,这是就需要 位置纠偏处理,校正后标记出坐标位置
参考百度API:http://developer.baidu.com/map/index.PHP?title=%E9%A6%96%E9%A1%B5