一.在html文件中引入
其中ak为百度地图秘钥，需去申请
二.js代码
function getLocation ( ){ navigator.geolocation.getCurrentPosition(function (position) { //H5 api var lat = position.coords.latitude; var lon = position.coords.longitude; var point = new BMap.Point(lon, lat); // 创建坐标点 // 根据坐标得到地址描述 var myGeo = new BMap.Geocoder(); myGeo.getLocation(point, function (result) { that.location = result.addressComponents.city; //获取当前城市 }); });} 1.地图展示
head中引入
body
jsvar map = new BMap.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别map.addControl(new BMap.MapTypeControl()); //添加地图类型控件map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 2.根据城市名设置地图中心点
var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom("上海",15); // 初始化地图,用城市名设置地图中心点 3.根据城市名定位
var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398,39.897445); //默认展示的位置map.centerAndZoom(point,11);function theLocation(){ var city = document.getElementById("cityName").value; //输入的城市名 if(city != ""){ map.centerAndZoom(city,11); // 用城市名设置地图中心点 }} 4.根据ip定位
var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398,39.897445);map.centerAndZoom(point,12);function myFun(result){ var cityName = result.name; map.setCenter(cityName); alert("当前定位城市:"+cityName);}var myCity = new BMap.LocalCity();myCity.get(myFun); 5.根据浏览器定位
var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398,39.897445);map.centerAndZoom(point,12);var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); alert('您的位置：'+r.point.lng+','+r.point.lat); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true})//关于状态码//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)