地理位置获取并显示 --- 百度地图API_两个地址导航的api-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42166007/article/details/96614519

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8"/>
    <title>Simple Map</title>
        <link rel="stylesheet" type="text/css" href="css/map.css">
        <script type="text/javascript" src="http://api.map.baidu.com/api?ak=E4805d16520de693a3fe707cdc962045"></script>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <div id="content" class="content">
            <div id="find">
                <input type="text" value="" id="keyword" />
                <input type="button" name="" id="search" value="查询" />
            </div>
            <div id="container"></div>
        </div>
    </body>
    <script type="text/javascript" src="js/map.js"></script>
</html>

Css：

body,html{
	width: 100%;
	height: 100%;
	margin:0 auto;
	padding: 0;
	font-family:"微软雅黑";
}
.content{
	margin: 0 auto;
}
p{
	margin-left:5px;
	font-size:14px;
}
#find{
	width:220px;
	display: block;
	margin: 0 auto;
}
#container{
	width:600px;
	height:500px;
	border:0px solid gray;
	display: block;
	margin: 0 auto;
}
/*设置当前控件样式*/
.BMap_cpyCtrl{
    display:none;
}
.anchorBL{
	bottom: 0;
}
.anchorTR>div:last-child{
    display: none;
}

Js：

var you_Longitude = 116.4039006839;  //初始经度
var you_latitude = 39.9152108931;  //初始纬度

//创建Map实例--begin
var map = new BMap.Map("container");
var point = new BMap.Point(you_Longitude,you_latitude);  //设置初始化位置
map.centerAndZoom(point,12);  //8参数为初始化画面尺度
//创建Map实例--begin

build_marker(you_Longitude,you_latitude);  //添加初始位置标注
map.enableScrollWheelZoom();  //添加鼠标滚动缩放

//添加控件--begin
map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));  //添加缩略图控件
map.addControl(new BMap.NavigationControl());  //添加缩放平移控件
map.addControl(new BMap.ScaleControl());  //添加比例尺控件
map.addControl(new BMap.MapTypeControl());  //添加地图类型控件
//添加控件--end

//判断浏览器是否支持当前位置获取--begin
if(navigator.geolocation){
    //浏览器支持geolocation
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(position){
        //添加当前位置--begin
        you_Longitude = position.point.lng;// 经度
        you_latitude = position.point.lat;// 纬度
        //执行坐标转换
        change_posi(you_Longitude,you_latitude,function(data){
            var longitude = data.result[0].x;  //转换后经度
            var latitude = data.result[0].y;  //转换后纬度
            var point = new BMap.Point(longitude,latitude);  //设置当前位置
            map.centerAndZoom(point,12);  //创建当前位置在中心点
            build_marker(longitude,latitude);  //添加当前位置标注
        });
        //添加当前位置--end
    },function(error){
        switch(error.code){
            case 1:
                alert("位置服务被拒绝");
            break;

            case 2:
                alert("暂时获取不到位置信息");
            break;

            case 3:
                alert("获取信息超时");
            break;

            case 4:
                alert("未知错误");
            break;
        }
    },{
        enableHighAccuracy:true, 
        maximumAge:1000
    });
}else{
    alert('浏览器不支持GeoLocation!');   //浏览器不支持geolocation
}
//判断浏览器是否支持当前位置获取--end

//点击地图，获取经纬度坐标--begin
map.addEventListener("click",function(e){
    // Longitude = e.point.lng;  //点击位置经度坐标
    // latitude = e.point.lat;  //点击位置纬度坐标
    map.clearOverlays();  //清除上一个标注
    build_marker(e.point.lng,e.point.lat);  //创建当前标注
});
//点击地图，获取经纬度坐标--end

//创建标注--begin
function build_marker(Longitude,latitude){
    //创建标注--begin
    var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",new BMap.Size(23,25));  //设置标注的图标
    var marker = new BMap.Marker(new BMap.Point(Longitude,latitude),{icon:icon});  //设置标注的经纬度
    map.addOverlay(marker);  //把标注添加到地图上
    //创建标注--end

    //创建位置信息内容--begin
    get_posi(latitude,Longitude,function(data){
        //渲染需显示的位置信息--begin
        var content = "<table>";  
            content = content + "<tr><td>行政区编码："+data.result.addressComponent.adcode+"</td></tr>";  
            content = content + "<tr><td>地址："+data.result.formatted_address+"</td></tr>";  
            content += "</table>";
        //渲染需显示的位置信息--end
        var infowindow = new BMap.InfoWindow(content);  //位置信息显示内容
        marker.addEventListener("mouseover",function(){  //鼠标移入显示
            this.openInfoWindow(infowindow);  //显示详细位置信息
        });
        marker.addEventListener("mouseout",function(){  //鼠标移出隐藏
            this.closeInfoWindow(infowindow);  //隐藏详细位置信息
        });
    });
    //创建位置信息内容--end 
}
//创建标注--end

//将经纬度转换为具体位置--begin
function get_posi(latitude,Longitude,_callback){
    $.ajax({    
        url : 'http://api.map.baidu.com/geocoder/v2/?ak=Y4NcP7YcxEkiwSuYedq5vW09&callback=renderReverse&location='+latitude+','+Longitude+'&output=json&pois=1&radius=1000',    
        type : 'get',
        data : 'data', 
        dataType:"jsonp",  //数据格式设置为jsonp,可跨域      
        success : _callback,  //设置回调函数
        error : function(msg){  //错误执行
            alert('api接口key值可能失效了！');
        }
    })
}
//将经纬度转换为具体位置--end

//执行搜索事件--begin
document.getElementById('search').onclick = function(){
    map.clearOverlays();  //清除上一个标注
    search();  //搜索地址
}
document.onkeydown = function(e){ 
    var ev = document.all ? window.event : e;
    if(ev.keyCode==13) {
        map.clearOverlays();  //清除上一个标注
        search();  //搜索地址
    }
}
//执行搜索事件--begin

//关键字搜索--begin
function search(){
    var keyword = document.getElementById("keyword").value;  //获取输入地址
    var local = new BMap.LocalSearch(map, {renderOptions:{map: map}});  //创建搜索类实例
    local.search(keyword);  //搜索地址
}
//关键字搜索--end

//坐标转换--begin
function change_posi(Longitude,latitude,_callback){
    $.ajax({        
        url : 'http://api.map.baidu.com/geoconv/v1/?coords='+Longitude+','+latitude+'&from=1&to=5&ak=Y4NcP7YcxEkiwSuYedq5vW09',
        type : 'get',
        data : 'data', 
        dataType:"jsonp",  //数据格式设置为jsonp,可跨域      
        success : _callback,  //设置回调函数
        error : function(msg){  //错误执行
            alert('api接口key值可能失效了！');
        }
    })
}
//坐标转换--end

// //已知地点名创建位置信息--begin
// var map = new BMap.Map("container"); //创建地图实例
// map.enableScrollWheelZoom();  //添加鼠标滚动缩放
// //添加控件
// map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));  //添加缩略图控件
// map.addControl(new BMap.NavigationControl());  //添加缩放平移控件
// map.addControl(new BMap.ScaleControl());  //添加比例尺控件
// map.addControl(new BMap.MapTypeControl());  //添加地图类型控件
// //显示地址
// var keyword = "广东广通医药有限公司";  //获取输入地址
// var local = new BMap.LocalSearch(map, {renderOptions:{map: map}});  //创建搜索类实例
// local.search(keyword);  //搜索地址
// //已知地点名创建位置信息--end