// 页面
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
// js代码
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
console.log('您的浏览器不支持获取位置信息');
x.innerHTML="您的浏览器不支持获取位置信息.";
}
}
function showPosition(position){
// 1. 简单获取当前位置
x.innerHTML="Latitude(纬度): " + position.coords.latitude + "<br />Longitude(经度): " + position.coords.longitude;
console.log("Latitude(纬度): " + position.coords.latitude + "<br />Longitude(经度): " + position.coords.longitude)
// 2. 使用谷歌地图显示当前位置
var latlon = position.coords.latitude+ "," +position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon +"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="![]("+img_url+")";
}
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝访问位置信息."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息不可用."
break;
case error.TIMEOUT:
x.innerHTML="获取位置信息超时."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误."
break;
}
}
在线调试1.简单获取当前位置
在线调试2. 使用谷歌地图显示当前位置
将原始坐标转换为百度坐标
参考 原始坐标转换百度地图API , google坐标转换为百度坐标
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// 调用百度地图api显示
var map = new BMap.Map("map");
var ggPoint = new BMap.Point(lng, lat);
map.centerAndZoom(ggPoint, 15);
map.addControl(new BMap.NavigationControl());
console.log('原始：'+lng+','+lat);
//坐标转换完之后的回调函数
translateCallback = function (data){
if(data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
map.addOverlay(marker);
console.log(data.points[0]); // 转换过的坐标
var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
marker.setLabel(label); //添加百度label
map.setCenter(data.points[0]);
}
}
setTimeout(function(){
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback);
// 转换参数参考下图
}, 1000);
转换参数
高德地图转换坐标
参考 高德地图API
var lng = position.coords.longitude;
var lat = position.coords.latitude;
console.log('原始：'+lng+','+lat);
AMap.convertFrom([lng,lat], 'gps',
function(status,result){
console.log('status:'+status)
console.log(result.locations[0]) // 获得转换后的经纬度
lng = result.locations[0].lng;
lat = result.locations[0].lat;
})
// 声明地图
var map = new AMap.Map('container',{
zoom: 10,
center: [lng,lat]//经度值在前，纬度值在后 new AMap.LngLat(116.39,39.9)
});
// 标记
var marker = new AMap.Marker({
position: [lng, lat],//marker所在的位置
map:map//创建时直接赋予map属性
});
高德坐标转换
使用百度api 根据经纬度获取当前位置信息
var gc = new BMap.Geocoder();
gc.getLocation(ggPoint, function(rs) {
console.log(rs);
var addComp = rs.addressComponents;
var mapAddress = addComp.province+addComp.city + addComp.district
+ addComp.street + addComp.streetNumber;
console.log('mapAddress:',mapAddress) // 浙江省杭州市滨江区浦沿路
});
