获取经纬度转成地点名称

通过微信获取经纬度再用腾讯地区转成地点名称,使用其他地图也行。有更好方法请指导。
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>

猜你喜欢

转载自blog.csdn.net/xiaosi1413/article/details/106000097