1.引入百度地图依赖包,申请自己的ak值;
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
2.JavaScript代码:
function getLocation() {
var options = {
enableHighAccuracy: true,
maximumAge: 1000
}
if (navigator.geolocation) {
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
//浏览器不支持geolocation
alert('您的手机不支持地理位置定位,请选择地址');
}
}
// 自动定位填充当前地址
function onSuccess(position) {
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var map = new BMap.Map("allmap");
var gpsPoint = new BMap.Point(longitude, latitude);
BMap.Convertor.translate(gpsPoint, 0, function (point) {
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
// 省
var addrpro = addComp.province;
// 市
var addrcity = addComp.city;
// 区
var addrtown = addComp.district;
});
});
}
function onError(error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝,请手动选择当前地址");
break;
case 2:
alert("暂时获取不到位置信息,请手动选择当前地址");
break;
case 3:
alert("获取信息超时,请手动选择当前地址");
break;
case 4:
alert("未知错误,请手动选择当前地址");
break;
}
}
window.onload = getLocation;
3.HTML添加地图标签,默认隐藏地图
<div id="allmap" style="display: none;"></div>