调用高德地图 浏览器定位当前位置API

原创 华ZhaoWeb 随笔 案列 817阅读 2017-05-09 21:44:23 举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>浏览器定位</title>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>;

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=1e1bdf47e669f82f63491d68ea676863&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

<body >
<div id='container'></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字:</label>
</td>
</tr>
<tr>
<td>
<input id="suggestId" placeholder="请输入关键字"/>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
//加载地图,调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true,
zoom:18
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonPosition:'RB',
showMarker: false, //是否显示蓝色的小圆点
buttonOffset: new AMap.Pixel(14, 125),
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
var lnglatXY = [data.position.getLng(),data.position.getLat()]; //已知点坐标
position(lnglatXY);// 给当前坐标点添加图标
regeocoder(lnglatXY); //逆地理编码
map.remove(markers1);//移除上一个标记点
}
//解析定位错误信息
function onError(data) {
alert('定位失败')
}
//逆地理编码
function regeocoder(lnglatXY) {

    var geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all"
    });

    geocoder.getAddress(lnglatXY, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            geocoder_CallBack(result);
            position(lnglatXY);
        }
    });

}
//逆地理编码 数据 展示
function geocoder_CallBack(data) {
    var address = data.regeocode.formattedAddress; //返回地址描述 formattedAddress addressComponent
    var Component = data.regeocode.addressComponent;
    var province = address.indexOf(Component.province),
            provinceLen = Component.province.length;
    var citys = address.indexOf(Component.city),
            citysLen = Component.city.length;
    var area = address.indexOf(Component.district),
            districtLen = Component.district.length;
    var community = address.indexOf(Component.township),
            townshipLen = Component.township.length;
    var newAddr;
    if(province != -1){
        newAddr = address.substr(provinceLen);
    }
    if(citys != -1){
        newAddr = address.substr(provinceLen + citysLen);
    }
    if(area != -1){
        newAddr = address.substr(provinceLen + citysLen + districtLen);
    }
    if(community != -1){
        newAddr = address.substr(provinceLen + citysLen + districtLen + townshipLen);
    }
    $('#suggestId').val(newAddr);

    //输入提示
    PlaceSearch(Component);
    //点击地图时获取当前的位置 并显示
    map.on('click', Curre);
}
//给做标点添加图标
var markers1 = [],
    positions = [];
function position(lnglatXY){

    var positions = [lnglatXY];
    for (var i = 0, marker1; i < positions.length; i++) {
        var icon = new AMap.Icon({
            image: './img/locimg.png',
            size: new AMap.Size(40,40),
        });
        marker1 = new AMap.Marker({
            map: map,
            icon:icon,
            isTop:true,
            offset: new AMap.Pixel(-15,-35),
            position: positions[i]
        });
        markers1.push(marker1);
    }

}
//点击地图时获取当前的坐标 并显示
function Curre(e) {
    //alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图!');

    var  currentLY= [e.lnglat.getLng(),e.lnglat.getLat()];//获取当前的点击的坐标值
    map.remove(markers1);//移除上一个标记点
    map.setZoomAndCenter(18,currentLY);
    positions.shift();
    position(currentLY);
    if(positions.length == 0){
        positions.push(currentLY);
        position(currentLY);
    }
    regeocoder(currentLY); //逆地理编码
}

//输入提示的方法函数
function PlaceSearch(Component){

    var adcode = Component.adcode;
    var autoOptions = {
        city:adcode,
        input: "suggestId"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map,
        pageSize: 1,//控制标记点显示的个数
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        var newPoiLngLat = [e.poi.location.lng,e.poi.location.lat];
        placeSearch.search(e.poi.name);  //关键字查询查询
        $('#suggestId').val(e.poi.name);
        map.remove(markers1);//移除上一个标记点
        position(newPoiLngLat);
    }
}

</script>
</body>
</html>

调用高德地图 浏览器定位当前位置API

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复