获取经纬度转成地点名称

通过微信获取经纬度再用腾讯地区转成地点名称,使用其他地图也行。有更好方法请指导。
1.需要安装微信 sdk ,腾讯地图 ,
2.安装后使用微信方法是获取经纬度,
3.用腾地图逆解析获取到地点名称
4.该项目使用element框架

安装微信sdk
npm install weixin-js-sdk
腾讯地图
在index.html 文件中引入

 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=CYMBZ-3NEK3-BMK32-YIMDI-DPXB5-4JB5Y"></script>

在这里插入图片描述
html 结构

 <el-select v-model="user.checkPlace" placeholder="请选择地点" class="select2" popper-class="select-option" >
          <el-option
            v-for="item in Site"
            :key="item.id"
            :label="item.address"
            :value="item.address">
          </el-option>
        </el-select>
<script>
export default {
  data() {
		    return { 
		         Site:[], 
		    }
  },
  created() {
     this.$axios.get("http://192.168.124.7:8090/wf/search?pageNum=0&pageSize=0",{ withCredentials: true               }).then(function(res) {
        if(res.data.info=="success"){
            then.kindList = res.data.data   
         }    
      })
    // 定位
    var then = this
    var url= window.location.href;
    var urls =url.substr(0, url.indexOf("#"));
    this.$axios.get("http://192.168.124.7:8090/wechat/getJsSdk?url="+urls,{ withCredentials: true }).then(res=>{
      // 获取必要信息实例化地图
          then.wx.config({
               debug: false, // 开启调试模式,
               appId: res.data.data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
               timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
               nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
               signature: res.data.data.signature,// 必填,签名,见附录1
               jsApiList: ['getLocation','translateVoice'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
          });

          then.wx.ready(function(){
                then.wx.getLocation({
                      type:'gcj02',
                        success: function(res) {
                          // 获取经纬度
                          var latLng = new qq.maps.LatLng(res.latitude, res.longitude);
                           test.getAddress(latLng)
                        },
                  })
          })
          // var thens = then
          // 调取腾讯地图
          var test= new qq.maps.Geocoder({
             complete : function(res){
                then.Site = res.detail.nearPois
             }
          })
    })

  },

}
</script>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小四是个处女座

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值