CSDN学习社区

百度地图javaScript API

一.在html文件中引入

<script src="http://api.map.baidu.com/api?ak=Uk9tDddYkrQImXw8DaG51OHTUCDDIqP5&v=2.0&services=false"></script>

其中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;  //获取当前城市
      });
    });
}

百度地图API示例

1.地图展示

head中引入<script src="http://api.map.baidu.com/api?ak=Uk9tDddYkrQImXw8DaG51OHTUCDDIqP5&v=2.0></script>

body
<div id="allmap"></div>

js
var 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 新增)