vue项目中使用高德地图JS API进行精确定位并获取定位信息

vue项目中使用高德地图JS API进行精确定位并获取定位信息

注册账号并申请Key

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」
   

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
   
   这一步不是很难,应该很快就搞定了.

应用

1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

因为咱们是vue项目所以直接在index.html中引用就行

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2.使用JS API 进行定位

简单粗暴,咱们直接上代码吧

<template>
    <div class="mapPosition">
        <div class="map-title">
           <p class="title">地图位置定位</p>
           <div class="positionInfo"><span>位置信息:</span><span>{{positionInfo.formattedAddress?positionInfo.formattedAddress:'未获取位置信息'}}</span></div>
        </div>
        <div id="iCenter"></div>
    </div>
</template>
<script>
export default {
    name:'mapPosition',
    data(){
        return{
            positionInfo:{},
        }
    },
    mounted(){
        this.initMap()
    },
    methods:{
        initMap(){
            var mapObj = new AMap.Map('iCenter');//以为这里是要获取地图容器的id,所以要写在mounted之中
            var geolocation
            var that = this
            mapObj.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
                });
                mapObj.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', that.onComplete); // 返回定位信息
                AMap.event.addListener(geolocation, 'error', that.onError);       // 返回定位出错信息
            });
        },
        onComplete(obj){
            this.positionInfo = obj
            var res = '经纬度：' + obj.position + 
                '\n精度范围：' + obj.accuracy + 
                '米\n定位结果的来源：' + obj.location_type + 
                '\n状态信息：' + obj.info + 
                '\n地址：' + obj.formattedAddress + 
                '\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4);
            console.log(this.positionInfo)
            console.log(res);
        },
        onError(obj) {
            alert(obj.info + '--' + obj.message);
            console.log(obj);
        },
    }
}
</script>
<style lang="scss" scoped>
.mapPosition{
    width: 100%;
    height: 100%;
    .map-title{
        .title{
            height: 60px;
            line-height: 60px;
            font-size: 28px;
        }
        .positionInfo{
            height: 50px;
            span{
                display: inline-block;
                height: 30px;
                line-height: 30px;
                font-size: 21px;
            }
        }
    }
    #iCenter{
        width: 80%;
        height: 600px;
        margin: 0 auto;
    }
}
</style>

注意:一定要为地图容器指定高度、宽度,否则地图容器没有高宽地图是不显示的.
生成地图的就是逻辑要在页面元素加载完成后,所以要把生成地图逻辑写在mounted中,否则获取不到地图容器id生成不了地图.

效果图:

一步步来你一定没问题,希望对你有帮助,欢迎评论一起讨论.