百度地图api

最新推荐文章于 2018-08-15 16:06:00 发布

原创最新推荐文章于 2018-08-15 16:06:00 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度Map

map 专栏收录该内容

3 篇文章

订阅专栏

1、引入js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourkey">

2、demo：

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:200px}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vMnsyeUwYcq6ExV4G2LO3OUWgU2AmqcF">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>  

<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");
console.log(map)
// 创建地图实例  
var point = new BMap.Point(116.404, 39.915);
console.log(point)
// 创建点坐标  
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别  

var marker = new BMap.Marker(point);

console.log(marker)
map.addOverlay(marker)

//Geocoder：逆/地址解析，用于坐标与地址间的相互转换
var myGeo = new BMap.Geocoder();
console.log('geo',myGeo)
myGeo.getPoint("广州市沙太路268号", function(point){   
    console.log(point)   
    if (point) {      
        map.centerAndZoom(point, 17);      
        map.addOverlay(new BMap.Marker(point));      
    }      
 }, 
"广州市");

//指定经纬度获取地址
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){      
    if (result){      
    console.log(result.address);      
    }      
});


//浏览器定位
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);
        map.centerAndZoom(r.point, 15);
        alert('您的位置(浏览器定位)：'+r.point.lng+','+r.point.lat);
    }
    else {
        alert('failed'+this.getStatus());
    }        
});

//IP定位
function myFun(result){
    var cityName = result.name;
    map.setCenter(cityName);
    alert("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
</script>  
</body>  
</html>