element ui -- 高德webAPI根据地址信息获取经纬度坐标

2022-06-30 17:05:27 阅读：177 来源： 互联网

标签：webAPI 经纬度 -- vm departmentForm element 地址 result var

需求：根据省市加地址信息获取经纬度

实现前提：具备高德申请好的密钥

代码实现：（这里根据外链引入形式实现高德webapi提供的开放接口）

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的密钥"></script>

先在index.html中引入文件路径。

其次在需要用到获取坐标方法的页面直接定义方法

//获取当前地点坐标
        getCoordinate() {
            let vm = this
            var map = new AMap.Map("container");
            var geocoder;
            var address = '';
            //地址和经纬度之间进行转换服务
            map.plugin(["AMap.Geocoder"], () => {
            geocoder = new AMap.Geocoder({
                city: ''
            });
            var address = vm.departmentForm.province + vm.departmentForm.city + vm.departmentForm.receivingAddress
          //对指定地址进行解析
            geocoder.getLocation(address, (status, result) => {
                    if (status === 'complete' && result.info === 'OK') {
                            console.log(result)
                        // return;
                        //TODO:获得了有效经纬度，可以做一些展示工作
                        //比如在获得的经纬度上打上一个Marker
                            vm.departmentForm.storeCoordinate = result.geocodes[0].location.lat + ',' + result.geocodes[0].location.lng
                            vm.departmentForm.longitude = result.geocodes[0].location.lng;
                            vm.departmentForm.latitude = result.geocodes[0].location.lat;
                            vm.$forceUpdate();
                    } else {
                    //获取经纬度失败
                        vm.$message.error('出错了，请输入正确的地址！！！');
                    }
                });
            })
        },

其中 var address = vm.departmentForm.province + vm.departmentForm.city + vm.departmentForm.receivingAddress 地址信息换上自己定义的省市区详细地址信息即可。

<el-button  type="primary"@click.stop="getCoordinate()">获取坐标</elbutton>

在html中点击直接获取地址坐标。

标签：webAPI,经纬度,--,vm,departmentForm,element,地址,result,var
来源： https://www.cnblogs.com/zhu-xl/p/16427586.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

element ui -- 高德webAPI根据地址信息获取经纬度坐标