web开发如何使用高德地图API（一）浏览器定位

标签：平台   get   EDA   中心   pos   如何   浏览器   服务平台   max   

说两句：

• 以下内容除了我自己写的部分，其他部分在高德开放平台都有（可点击外链访问）。
• 我所整理的内容以实际项目为基础希望更有针对性的，更精简。

准备工作：

• 首先，注册开发者账号，成为高德开放平台开发者
• 登陆之后，在进入「应用管理」 页面「创建新应用」
• 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件

显示基础地图所用到的HTML和JS

引入定位用的JS文件

浏览器定位所用到的JS

/**
 * Created by Mark on 2018/5/3.
 */
//定位
map.plugin(‘AMap.Geolocation‘, function () {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,        //显示定位按钮，默认：true
        buttonPosition: ‘LB‘,    //定位按钮停靠位置，默认：‘LB‘，左下角
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, ‘complete‘, onComplete);//返回定位信息
    AMap.event.addListener(geolocation, ‘error‘, onError);      //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
    if(data.status == 1){
        console.log("定位成功");
        $("#addressInput").val(data.formattedAddress);
        sessionStorage.setItem("dingWei-lng",data.position.getLng());
        sessionStorage.setItem("dingWei-lat",data.position.getLat());
    }
    var str = [];
    str.push(‘经度：‘ + data.position.getLng());
    str.push(‘纬度：‘ + data.position.getLat());
    str.push(‘是否经过偏移：‘ + (data.isConverted ? ‘是‘ : ‘否‘));
    console.log(str.join(‘
‘));
}
function onError() {
    var str = [];
    str.push(‘定位失败‘);
    console.log(str.join(‘
‘));
}

到这里为止，使用高德地图实现浏览器定位已经完成了。
但是...^_^

/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
***************************************/

web开发如何使用高德地图API（一）浏览器定位

标签：平台   get   EDA   中心   pos   如何   浏览器   服务平台   max   

原文地址：https://www.cnblogs.com/meng-ma-blogs/p/9278138.html