ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uniapp 打包app 引入高德地图

2022-06-21 16:36:01  阅读:167  来源: 互联网

标签:uniapp addre console name res app address 高德 log


一。高德地图注册key值

二。项目中添加配置

 

 

 

 

 

 

三。项目中引用

 

 

 

<view class="home-btom-box" >
  <view class="home-zs">
      <image class="img-addicon" src="../../static/images/com_icon_adress.png" mode=""></image>
      <view class="home-address">住所:{{item.address}}</view>
  </view>
  <view class="home-dhg" @click='goGaod(item.name,item.address,item.lat_lag)'>
     <image class="img-dhicon" src="../../static/images/com_icon_dh.png" mode=""></image>
     <view class="home-dhname">导航</view>
  </view>
</view>
goGaod(name,addre){
                let that = this
                if(timer !=null){
                    clearTimeout(timer)
                }
                timer=setTimeout(function(){
                    that.getLng(name,addre)
           },1000)
            },
            //获取 位置的经纬度
            getLng(name,addre){
                let that = this
                uni.request({
                    url: 'https://restapi.amap.com/v3/geocode/geo',
                    method: 'GET',
                    data: {
                        key: '7757a7501dded9289d*******e6', //高德地图key web的
                        address: addre // 地址
                    },
                    success:function(res){
                        let lo = res.data.geocodes[0].location.split(',')[0]
                        let la = res.data.geocodes[0].location.split(',')[1]
                        that.shop_longtude = lo
                        that.shop_latitide = la
                        that.openMap(name,addre,lo,la)
                    }
                })
            },

openMap(name,addre,lo,la){
  uni.openLocation({
    latitude: Number(la),
    longitude: Number(lo),
    name: name,
    address: addre,
    success: function() {
      console.log('success');
    },
    fail:function(err){
      console.log('打开地图失败',err)
    }
  })
},

 

 

 

 

四,直接打开地图选择地址

 

 

<view class="uni-list-cell-db">
      <view class="addcom-name">住所</view>
      <view class="uni-input-wrapper">
             <input class="input-write" v-model="form.address" placeholder="请输入" />
      </view><image @click="goMaps" class="icon-right" src="../../static/images/com_icon_adress.png" mode=""></image>
</view>

 

goMaps(){
     let that = this
     uni.chooseLocation({
          success: function (res) {
                console.log(res,'res')
                console.log('位置名称:' + res.name);
                console.log('详细地址:' + res.address);
                console.log('纬度:' + res.latitude);
                console.log('经度:' + res.longitude);
                that.form.address = res.address
           }
      });
},

 

 

标签:uniapp,addre,console,name,res,app,address,高德,log
来源: https://www.cnblogs.com/anna001/p/16397248.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有