手机端GPS定位结合百度地图实现定位
Posted xzzzys
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机端GPS定位结合百度地图实现定位相关的知识,希望对你有一定的参考价值。
html页面:
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
meta
name
=
"viewport"
content
=
"initial-scale=1.0, user-scalable=no"
/>
<
style
type
=
"text/css"
>
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</
style
>
<
title
></
title
>
</
head
>
<
body
>
<
p
id
=
"allmap"
></
p
>
</
body
>
</
html
>
JS部分:
<script type=
"text/javascript"
>
var
x =
""
;
var
y =
""
;
var
dizhi =
""
;
function
getLocation(){
if
(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
alert(
"浏览器不支持地理定位。"
);
}
}
function
showPosition(position){
y = position.coords.latitude;
//纬度
x = position.coords.longitude;
//经度
// 百度地图API功能
//GPS坐标
var
x = 116.32715863448607;
var
y = 39.990912172420714;
var
ggPoint =
new
BMap.Point(x, y);
//地图初始化
var
bm =
new
BMap.Map(
"allmap"
);
bm.centerAndZoom(ggPoint, 15);
bm.addControl(
new
BMap.NavigationControl());
bm.enableScrollWheelZoom();
//启用滚轮放大缩小,默认禁用
bm.enableContinuousZoom();
//启用地图惯性拖拽,默认禁用
bm.addEventListener(
"tilesloaded"
,
function
() { });
//地图加载完成
var
gc =
new
BMap.Geocoder();
bm.addEventListener(
"click"
,
function
(e) {
ggPoint =
new
BMap.Point(e.point.lng, e.point.lat);
gc.getLocation(ggPoint,
function
(rs) {
var
addComp = rs.addressComponents;
var
mapAddress = addComp.province + addComp.city + addComp.district
+ addComp.street + addComp.streetNumber;
dizhi = mapAddress;
if
(confirm(dizhi)) {
window.location.href =
"succes.html"
}
var
marker =
new
BMap.Marker(ggPoint);
// 创建点
bm.addOverlay(marker);
var
label =
new
BMap.Label(
"您选择的位置为"
+dizhi, { offset:
new
BMap.Size(20, -10) });
marker.setLabel(label);
//添加百度label
bm.setCenter(ggPoint);
});
});
bm.addControl(
new
BMap.NavigationControl());
//坐标转换完之后的回调函数
translateCallback =
function
(data) {
if
(data.status === 0) {
var
marker =
new
BMap.Marker(data.points[0]);
bm.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
//跳动的动画
//marker.enableDragging();//可拖拽
//var label = new BMap.Label("您所在的位置", { offset: new BMap.Size(20, -10) });
//marker.setLabel(label); //添加百度label
//bm.setCenter(data.points[0]);
//var a=BMap.Convertor(ggPoint, 0);
gc.getLocation(data.points[0],
function
(rs) {
//alert(rs.sematic_description);
var
addComp = rs.addressComponents;
var
mapAddress = addComp.province + addComp.city + addComp.district
+ addComp.street + addComp.streetNumber;
dizhi = mapAddress;
confirm(dizhi);
if
(confirm(dizhi)) {
window.location.href =
"succes.html"
}
var
label =
new
BMap.Label(
"定位您所在的位置为"
+dizhi, { offset:
new
BMap.Size(20, -10) });
marker.setLabel(label);
//添加百度label
bm.setCenter(data.points[0]);
});
}
}
setTimeout(
function
() {
var
convertor =
new
BMap.Convertor();
var
pointArr = []
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)
}, 1000);
}
function
showError(error){
switch
(error.code) {
case
error.PERMISSION_DENIED:
alert(
"定位失败,用户拒绝请求地理定位"
);
break
;
case
error.POSITION_UNAVAILABLE:
alert(
"定位失败,位置信息是不可用"
);
break
;
case
error.TIMEOUT:
alert(
"定位失败,请求获取用户位置超时"
);
break
;
case
error.UNKNOWN_ERROR:
alert(
"定位失败,定位系统失效"
);
break
;
}
}
getLocation();
</script>
以上是关于手机端GPS定位结合百度地图实现定位的主要内容,如果未能解决你的问题,请参考以下文章