js与百度地图

如何调用百度地图

打开百度api文档-申请秘钥-添加域名白名单-引入api。

<script src="http://api.map.baidu.com/api?ak=填写你自己的产品秘钥&v=2.0&services=false"></script>

然后我们就可以开始使用了，根据地图api文档我们就能实现想要的效果了。

使用地图首先需要H5定位，geolocation 这个方法是H5新增特性，专门用来实现客户端地理定位的。

//判断是否支持 获取本地位置
                 if (navigator.geolocation) {
                   var n = navigator.geolocation.getCurrentPosition(function(res){
                       console.log(res); // 需要的坐标地址就在res中
                   });
                } else {
                    alert('该浏览器不支持定位');
                }

if(navigator.geolocation){//判断是否支持H5定位
        var geolocation=new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus()==BMAP_STATUS_SUCCESS){
                    console.log(r);//打印下这行代码，里面有位置信息
                var lat=r.address.lat//当前经度
                var lng=r.address.lng//当前纬度
                var province=r.address.province //返回当前省份
                var city=r.address.city//返回当前城市 
            }
        })
    }
    else{
        alert("定位失败");
    }

下面我们来看看创建地图

<div class="container"></div>//这里是你要显示的地图      注意要设置宽高
<script>
  var map = new BMap.Map("container");  
  console.log(r);//输出这个可以看到很多位置信息
  var point1 = new BMap.Point(115.096636,30.221034);// 根据用户当前坐标 创建地图实例  
  map.centerAndZoom(point1, 16);  // 初始化地图，设置中心点坐标和地图级别  
</script>