移动开发

手机端GPS定位结合百度地图实现定位

云博小周宇8 Mins Read

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
> 
    
<
script
type
=
"text/javascript"
src
=
"https://api.map.baidu.com/api?v=2.0&ak=密钥"
></
script
> 
    
<
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>